Contrast Checker

When to use Contrast Checker

• Finalising text and background colour pairings: Before committing any text colour to a design system token, verify the contrast ratio against every background it will appear on, not just the primary background.
• Accessibility audits and QA sign-off: Use during design review or pre-release QA to verify colour combinations pass WCAG AA. Document the ratios as evidence for accessibility compliance reports.
• Checking placeholder and hint text: Placeholder text in form fields frequently fails contrast checks because designers use a very light grey. WCAG requires placeholder text to meet the same 4.5:1 threshold as regular text.
• Validating interactive state colours: Hover, focus, active, and disabled states all need their own contrast checks - the colour used in a hover state may fail even when the default state passes.

How contrast ratio is calculated using relative luminance

The Contrast Checker calculates the relative luminance of your foreground and background colours using the formula defined in WCAG 2.2 Success Criterion 1.4.3. Relative luminance is a measure of the perceived brightness of a colour, normalised to a scale from 0 (absolute black) to 1 (absolute white). The formula applies a linearisation step to each RGB channel - values above 0.04045 use ((value / 255 + 0.055) / 1.055) ^ 2.4; values at or below that threshold use (value / 255) / 12.92. This linearisation compensates for the gamma encoding used by sRGB monitors.

Once each colour's relative luminance (L) is calculated, the contrast ratio is: (L1 + 0.05) / (L2 + 0.05), where L1 is the lighter of the two colours and L2 is the darker. The 0.05 offset accounts for the luminance of a monitor that is not displaying pure black. Contrast ratios range from 1:1 (no contrast, identical colours) to 21:1 (white on black or black on white).

WCAG 2.2 defines pass thresholds at two conformance levels. Level AA requires 4.5:1 for normal text (below 18pt or below 14pt bold) and 3:1 for large text (18pt or above, or 14pt bold or above). Level AAA requires 7:1 for normal text and 4.5:1 for large text. Non-text elements such as icons, form borders, and focus indicators must meet 3:1 under Success Criterion 1.4.11. The tool displays the exact ratio and a clear AA/AAA pass or fail indicator for each threshold.