Skip to content

Add contrast() function to check contrast ratio for two colors #7944

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 2 commits into
base: dev-2.0
Choose a base branch
from
Open

Add contrast() function to check contrast ratio for two colors #7944

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
a79b653
contrast function first PR
FerrinThreatt Jun 27, 2025
5fe2c71
contrast function and AA/AAA constants
FerrinThreatt Jun 27, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
34 changes: 33 additions & 1 deletion src/color/p5.Color.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@

import { RGB, RGBHDR, HSL, HSB, HWB, LAB, LCH, OKLAB, OKLCH } from './creating_reading';


import {
ColorSpace,
to,
Expand All @@ -25,7 +26,7 @@ import {

OKLab,
OKLCH as OKLCHSpace,

contrast,
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

cool, TIL colorjs has this built in!

P3
} from 'colorjs.io/fn';
import HSBSpace from './color_spaces/hsb.js';
Expand All @@ -41,6 +42,9 @@ const map = (n, start1, stop1, start2, stop2, clamp) => {

const serializationMap = {};




class Color {
// Reference to underlying color object depending on implementation
// Not meant to be used publicly unless the implementation is known for sure
Expand Down Expand Up @@ -290,6 +294,34 @@ class Color {
}
return colorString;
}
/**
* Checks if two colors contrast ratio is WCAG 2.1 compliant and returns the ratio
*
* @param {Color} other
* @returns {{ ratio: Number, passes: boolean }}
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Do you know if passes is using AA or AAA or something else?

* @example
* <div>
* <code>
*
* function setup() {
* // Define colors
* let color1 = color(255, 255, 255);
* let color2 = color(0);
*
* // Test for contrast
* let result = color1.contrast(color2)
*
* console.log(result)
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

On the p5.js reference, this will require users to open the console to see the result. Do you think we could show the result on the screen with something like text()?

*
* }
* </code>
* </div>
*/
contrast(new_other) {
const contrast_method = 'WCAG21';
const ratio = contrast(this._color, new_other._color, contrast_method);
return ratio;
};

/**
* Sets the red component of a color.
Expand Down
15 changes: 15 additions & 0 deletions src/core/constants.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1371,3 +1371,18 @@ export const EXCLUDE = Symbol('exclude');
* @private
*/
export const JOIN = Symbol('join');

/**
* @typedef {'color-contrast-threshold-aa'} COLOR_CONTRAST_THRESHOLD_AA
* @property {COLOR_CONTRAST_THRESHOLD_AA} COLOR_CONTRAST_THRESHOLD_AA
* @final
*/
export const COLOR_CONTRAST_THRESHOLD_AA = 4.5;


/**
* @typedef {'color-contrast-threshold-aaa'} COLOR_CONTRAST_THRESHOLD_AAA
* @property {COLOR_CONTRAST_THRESHOLD_AAA} COLOR_CONTRAST_THRESHOLD_AAA
* @final
*/
export const COLOR_CONTRAST_THRESHOLD_AAA = 7.0;
Loading