The hex code inputs will accept:
Note that opacity values are discarded.
The channel sliders can be controlled by clicking, dragging, or scrolling the mouse wheel. With text inputs selected, you can also adjust the values using your keyboard's arrow keys (hold shift to change by larger amounts).
Click on the colour code descriptions to copy them to your clipboard.
Contrast is calculated using the new WCAG 3 algorithm currently being developed. This new technique (which uses "lightness" as defined by the CIELAB colour space) is an improvement over the WCAG 2.1 ratio, because it is a better measure of contrast as perceived by the human visual system.
WCAG 3 is still in a draft version that is constantly being updated — for the most accurate and up-to-date calculations and to find suggested target contrast values for a given situation, please visit myndex.com/APCA. In general, a contrast of 60 is considered to be "roughly equivalent" to the WCAG 2.1 contrast ratio of 4.5, which is considered a rule of thumb for minimum contrast. A value of 90 is recommended for accessible body text.
This was built by C. Liam Brown using:
It was inspired by: