Color Tools
Color Contrast Checker (WCAG)
Check the WCAG 2.x contrast ratio between any two colors. Instantly see pass/fail results for AA and AAA levels across normal text, large text, and UI components. Runs entirely in your browser.
Normal text (16 px) - The quick brown fox jumps over the lazy dog.
Large text (20 px bold) - The quick brown fox.
Display (30 px bold)
| Level | Context | Required | Result |
|---|---|---|---|
| AA | Normal text | 4.5:1 | Pass |
| AA | Large text | 3.0:1 | Pass |
| AA | UI components | 3.0:1 | Pass |
| AAA | Normal text | 7.0:1 | Pass |
| AAA | Large text | 4.5:1 | Pass |
How WCAG contrast ratio is calculated
The contrast ratio between two colors is defined by WCAG 2.x as:
(L1 + 0.05) / (L2 + 0.05)Where L1 is the relative luminance of the lighter color and L2 is the relative luminance of the darker color. Relative luminance is calculated by first converting each sRGB channel value (0–255) to a linear light value (using a gamma-correction curve), then weighting by the standard luminance coefficients:
L = 0.2126 × R_lin + 0.7152 × G_lin + 0.0722 × B_lin
These coefficients reflect how the human eye perceives brightness: we are much more sensitive
to green than to blue. The +0.05 offset prevents a division-by-zero when comparing
against pure black and ensures the ratio scales from 1:1 (identical colors) to 21:1 (black on white).
What ratio do I need for AA / AAA?
WCAG 2.1 defines three conformance levels (A, AA, AAA) and two text sizes:
- AA Normal text: 4.5:1 minimum. Required for body copy, navigation links, and most UI text smaller than 18 pt regular or 14 pt bold.
- AA Large text: 3:1 minimum. Applies to text at 18 pt (24 px) regular or 14 pt (approximately 18.67 px) bold and above.
- AA UI components & graphical objects: 3:1 minimum. Applies to active interface components (input borders, focus rings, icon-only buttons) and meaningful parts of charts and diagrams.
- AAA Normal text: 7:1 minimum. The highest threshold; ideal for body copy read by users with significant low vision.
- AAA Large text: 4.5:1 minimum. The same as AA for normal text, but for large text.
Most design systems target AA at minimum. AAA is aspirational and may not be achievable for decorative text or logos, which are exempt from contrast requirements entirely.
WCAG 3.0 and APCA
The W3C is developing WCAG 3.0, which will replace the current contrast ratio formula with the Advanced Perceptual Contrast Algorithm (APCA). APCA is polarity-aware (light text on dark background is evaluated differently from dark text on light), uses a non-linear model that better matches human perception, and produces a different numeric scale (Lc values typically 0–106 rather than 1:1 to 21:1). WCAG 3.0 is not yet published as a final recommendation and is not currently required by law or standard procurement. Continue targeting WCAG 2.1 AA for current projects.
Common failing color combinations
| Text | Background | Contrast ratio | Result |
|---|---|---|---|
| Gray (#767676) | White (#FFFFFF) | 4.54:1 | AA pass (barely) |
| Gray (#6B6B6B) | White (#FFFFFF) | 4.12:1 | AA fail |
| Light gray (#BBBBBB) | White (#FFFFFF) | 1.97:1 | Fail |
| Yellow (#FFFF00) | White (#FFFFFF) | 1.07:1 | Fail (nearly invisible) |
| Light blue (#ADD8E6) | White (#FFFFFF) | 1.68:1 | Fail |
| Red (#FF0000) | White (#FFFFFF) | 3.99:1 | AA fail for normal text |
| Dark green (#006400) | Black (#000000) | 1.55:1 | Fail |
| Purple (#800080) | Dark blue (#00008B) | 1.09:1 | Fail |
Design tokens and automated testing
In a design system, design tokens (e.g., --color-text-primary,
--color-bg-surface) define canonical color pairings. Automated contrast checks
can be run at build time using tools such as axe-core, Storybook's accessibility addon, or
Playwright with axe-playwright. Catching contrast failures during development is far less
expensive than remediating them after production deployment.