Color Contrast Calculator
Check WCAG contrast ratio between two colours for accessibility.
What the Color Contrast Calculator does
WCAG contrast compares the relative luminance of two colours after linearising them out of sRGB’s gamma curve. The result runs from 1:1 to 21:1, and the required minimum depends on text size — larger text is legible at lower contrast.
Formula
Linearise each channel: c ≤ 0.03928 ? c/12.92 : ((c+0.055)/1.055)^2.4L = 0.2126R + 0.7152G + 0.0722BRatio = (L_lighter + 0.05) ÷ (L_darker + 0.05)AA needs 4.5:1 normal, 3:1 large; AAA needs 7:1 and 4.5:1
Inputs explained
| Input | Unit | Required | Notes |
|---|---|---|---|
| Text colour | text | Yes | — |
| Background colour | text | Yes | — |
| Text size | one of 2 options | Yes | — |
How to use it
- Choose Text size.
- Enter Text colour and Background colour.
- Select Calculate.
Worked example
Blue #3B82F6 text on a white background, at normal size.
- Text
- #3B82F6
- Background
- #FFFFFF
- Size
- Normal
Luminance 0.2355 against white’s 1.0 gives 3.68:1 — below the 4.5:1 AA threshold for normal text, though it passes the 3:1 bar for large text and UI components.
Frequently asked questions
What contrast ratio do I actually need?
4.5:1 for normal text and 3:1 for large text to meet AA. AAA raises those to 7:1 and 4.5:1. UI components and meaningful graphics need 3:1.
Why do two colours with the same lightness contrast so differently?
Because relative luminance weights green at 0.7152 and blue at just 0.0722. A saturated blue is far darker perceptually than a green of the same HSL lightness.