Contrast Checker
WCAG color contrast checker. Pick text and background colors, see live preview, contrast ratio, and AA/AAA pass/fail for normal and large text. Works offline.
About this tool
A WCAG 2.1 contrast checker for designers and developers. Pick a foreground (text) and background color — via the swatch picker or by typing a hex value — and the tool computes the contrast ratio between them in real time. A live preview pane shows heading, body, large text, small text, link, and button styles rendered in your chosen colors, so you can judge the result visually, not just numerically. The ratings grid shows pass/fail for Normal Text AA (4.5:1), Large Text AA (3:1), Normal Text AAA (7:1), Large Text AAA (4.5:1), UI Components (3:1), and Graphical Objects (3:1). A suggestion bar offers the best-contrast grays against your background, one tap to apply. The hex swap button instantly flips foreground and background. Works fully offline.
Details
- Category
- design
- Version
- 1.0.0
- Size
- 26 KB
- Updated
- Jun 2026
Frequently Asked Questions
What is WCAG contrast?
WCAG (Web Content Accessibility Guidelines) defines minimum contrast ratios between text and its background. The ratio is computed from relative luminance, not just lightness. AA requires 4.5:1 for normal text and 3:1 for large text; AAA tightens those to 7:1 and 4.5:1 respectively.
How is the ratio calculated?
Each color is converted to its relative luminance using the sRGB transfer function, then the ratio is (L1 + 0.05) / (L2 + 0.05) where L1 is the brighter. The result is a number from 1 (no contrast) to 21 (pure black on pure white).
What counts as "large text"?
Per WCAG 2.1, large text is at least 18pt regular (24px) or 14pt bold (≈18.7px). Large text gets a lower contrast threshold (3:1) because the eye reads it more easily than small body copy.
What about non-text contrast?
Beyond text, WCAG 2.1 SC 1.4.11 requires a 3:1 contrast for UI components and graphical objects (icons, form field borders, charts). The ratings grid shows a dedicated 3:1 entry for these.
How are the suggestions chosen?
The suggestion bar shows 6 grayscale shades (#000 through #FFF), each scored against your background. The highest-contrast ones appear first. Tap any to make it the foreground.
