Color Contrast Checker

This tool measures the contrast ratio between two colours, a text colour and its background, and tells you whether it meets the WCAG accessibility standards that make text readable for everyone. Sufficient contrast is one of the most important and most overlooked parts of accessible, well-designed websites and documents. People with low vision, colour blindness, or simply those reading on a phone in bright sunlight, all depend on text standing out clearly from its background. The Web Content Accessibility Guidelines, or WCAG, set precise contrast requirements measured as a ratio, from 1 to 1 for identical colours up to 21 to 1 for black on white. The thresholds are 4.5 to 1 for normal text and 3 to 1 for large text at the AA level, and stricter 7 to 1 and 4.5 to 1 at the demanding AAA level. This tool calculates the ratio and checks it against all of these. You pick a foreground and a background colour, and the calculator works out the relative luminance of each, computes the contrast ratio between them, and shows whether the pair passes AA for normal and large text and AAA for normal text. The results update as you change either colour, so you can adjust until the combination passes. Use it to check that your text is readable, to choose accessible colour pairs for a website or document, or to fix a combination that fails. Meeting at least the AA level for normal text is the widely accepted minimum for accessible content. Good contrast helps every reader, not only those with impaired vision.

WCAG contrast ratio. AA needs 4.5:1 for normal text and 3:1 for large text; AAA needs 7:1 and 4.5:1. Aim for at least AA normal for body text.