Contrast Checker: instructions, examples and limits

What it does

WCAG 2.x: linearize sRGB at 0.04045, L = 0.2126R + 0.7152G + 0.0722B. Contrast = (lighter L + 0.05)/(darker L + 0.05). AA normal text requires 4.5:1; large text 3:1.

Use the contrast checker to test a foreground/background pair against the documented WCAG relative-luminance ratios.

How to use it

1. 1

   Choose the text and background colours or enter their exact colour values.

2. 2

   Read the ratio and the normal-text, large-text and UI guidance.

3. 3

   Test the pair in the real component, including focus, hover, disabled and dark-mode states.

How the result is produced

WCAG 2.x: linearize sRGB at 0.04045, L = 0.2126R + 0.7152G + 0.0722B. Contrast = (lighter L + 0.05)/(darker L + 0.05). AA normal text requires 4.5:1; large text 3:1.

Important limits

Pass/fail uses the unrounded ratio. Large means at least 18pt regular or 14pt bold. Opaque solid colours only; no transparency or gradients.

Checks before sharing or relying on the result

• A ratio is a starting point, not a complete accessibility audit.
• Font size, weight, anti-aliasing, images and surrounding colours affect real readability.
• Do not communicate status by colour alone; pair colour with text, shape or another cue.

Choosing the next step

Start with the representation your design system already uses. Use the contrast checker for a foreground/background pair, then test the actual font size and weight in context. A mathematically valid colour value can still be a poor interface choice.