Check WCAG contrast between two colors.
Free to use, no sign-up required. Color Contrast is one of 198 tools built into Xenition, alongside a chat that can use them for you.
Checks the contrast ratio between a text colour and a background colour against the WCAG accessibility levels, for designers and developers choosing readable colour pairs.
Each colour’s relative luminance is calculated by the WCAG formula: each channel is linearised, then weighted 0.2126 red, 0.7152 green and 0.0722 blue. The ratio is (lighter + 0.05) ÷ (darker + 0.05), from 1 to 21. AA passes at 4.5 or more, AAA at 7 or more, and Large (the AA level for large text) at 3 or more. Only six-digit hex codes are read.
Mid-grey #777777 on white gives 4.48, just failing AA for body text, while #767676 on white gives 4.54 and passes. The default #0A1128 on white scores 18.69 and passes all three.
Text at least 18 point (about 24 px), or 14 point (about 18.66 px) and bold. Large text needs a ratio of 3:1 for AA, compared with 4.5:1 for normal text.
WCAG 2.1 asks for at least 3:1 between interface parts, such as input borders and icons, and their surroundings. Text on a button still follows the normal text rules.
You do not have to open Color Contrast to use it. Ask Xenition in plain language and it runs the right tool, then carries the answer into whatever you are working on — a document, a spreadsheet, a deck.