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.
Reading the result
- "Improvement needed for AA" turns a fail into a concrete design target — a 1.22× ratio increase is a usable brief, more actionable than the pass/fail verdict alone.
- The "against common backgrounds" table checks one foreground colour against a whole palette of standard backgrounds at once, useful for validating a design system rather than one pairing at a time.
Assumptions and limitations
- Text size is treated as binary, normal or large, per the WCAG threshold table — the actual legal boundary depends on exact point size and weight, which this does not itself validate; it applies whichever threshold is selected.
- Contrast ratio is colour-based only — it says nothing about font rendering, anti-aliasing or screen calibration, all of which affect real-world legibility beyond what this formula measures.
Common mistakes
- Treating a pass at the 3:1 UI-component threshold as sufficient for body text — the verdict message distinguishes the two, but it is easy to misread a UI-level pass as general accessibility clearance for text.
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.