Colour Contrast Tool

Usage Notes

The hex code inputs will accept:

• hex codes (3 or 6 characters, with or without "#")
• CSS names (e.g. "purple" or "cornflowerblue")
• RGB / sRGB / rgba() codes
• HSL / hsla() codes
• CSS Color 4 lch() or lab() codes

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

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.

Technical Info

This was built by C. Liam Brown using:

• chroma.js
• Alpine.js
• Tailwind CSS
• Ionicons
• Heroicons
• copy-text-to-clipboard

It was inspired by:

• LCH Colour Picker
• Myndex Technologies - APCA Contrast Calculator
• Accessible Palette