🎨 Colour & Contrast Checker

Pick a text colour and a background colour and get the official WCAG contrast ratio with pass/fail badges for AA and AAA — the same numbers the accessibility auditors use, computed from the published formula on your device. When a pair fails, the page also finds the nearest colour that passes, so you can fix the design instead of just being scolded.

Click a swatch under the preview to try it as the text colour; the suggestions blend your text colour toward black or white by the smallest step that reaches the target ratio.

Palette lab — tints & shades

Nine tints (mixed toward white) and nine shades (toward black) of the current text colour.

What the numbers mean

AA is the level most laws and policies require: normal text needs a ratio of 4.5:1, large text (≈18.66px bold or 24px regular and up) needs 3:1. AAA raises those to 7:1 and 4.5:1. The ratio comes from relative luminance — each channel is linearised from sRGB and weighted for how sensitive the human eye is to red, green and blue (0.2126 / 0.7152 / 0.0722), which is exactly why bright yellow on white fails so violently while you can still read it yourself on a good screen. Roughly 1 in 12 men and 1 in 200 women have some colour-vision deficiency, and every user over 40 loses contrast sensitivity — accessibility maths is audience maths, not bureaucracy.

Part of Everyday Tools. Tukuk-OS practices what it checks: pages here ship with a read-aloud engine and this checker exists because we audited ourselves with it.