Color Contrast Checker
Design Tools
Check the WCAG contrast ratio between two colors. See pass/fail for AA and AAA at normal and large text sizes, with a live sample preview and one-click 'find passing color' helper.
Runs entirely in your browserAbout Color Contrast Checker
WCAG (Web Content Accessibility Guidelines) defines color-contrast thresholds that determine whether text is readable for users with low vision: 4.5:1 for normal text and 3:1 for large text at level AA, with stricter 7:1 / 4.5:1 thresholds at level AAA. Most accessibility laws and procurement requirements (Section 508, EN 301 549, EAA) reference these numbers directly. Failing them means a portion of your audience literally can't read your interface.
This checker computes the exact contrast ratio using the WCAG relative-luminance formula, the same calculation behind the screen-reader vendor tools and Chrome DevTools' contrast checker. You pick foreground and background colors with hex pickers, see the ratio update live, and get four pass/fail badges for the WCAG combinations that matter. The sample text block uses your picked colors at 16px and 24px so you can read with your own eyes whether the result looks legible. The 'Find passing' button keeps your background and nudges the foreground's lightness in HSL until AA contrast passes — useful when you have a brand color you want to preserve and need a compliant pair. All math runs in your browser.
How to use
- 1
Pick a foreground color
Use the left color picker for your text color. The hex input accepts typed values too.
- 2
Pick a background color
Use the right color picker for the surface behind the text.
- 3
Read the contrast ratio
The big number is the WCAG contrast ratio (1.00 = no contrast, 21.00 = max contrast, black on white).
- 4
Check the WCAG badges
Four badges show pass/fail at AA normal, AA large, AAA normal, AAA large. AA normal (≥4.5) is the threshold most projects aim for.
- 5
Use 'Swap' or 'Find passing'
Swap reverses fg/bg. Find passing keeps the background fixed and nudges the foreground's lightness until AA normal passes.
Examples
Black on white — perfect contrast
Output
#000000 on #ffffff = 21.00:1 — passes everythingLight gray on white — common failure
Many design systems use #999 or #aaa for muted text without realizing it fails AA.
Output
#999999 on #ffffff = 2.85:1 — fails AA normal AND largeBrand color readability
A common Tailwind blue on white.
Output
#3b82f6 on #ffffff = 4.61:1 — barely passes AA normal, fails AAAFrequently asked questions
What counts as 'large text'?+
WCAG defines large text as 18pt (24px) or larger, OR 14pt (18.67px) bold. The threshold is more lenient (3:1 instead of 4.5:1) because larger text is more legible even with lower contrast.
Why 4.5:1? Where does that number come from?+
The WCAG working group calibrated it against the visual acuity of users with 20/40 vision (mild low vision, very common in older adults). 4.5:1 is the ratio where such users can still read normal-size body text without struggle.
Should I target AA or AAA?+
AA is the legal floor in most jurisdictions and what most accessibility-aware projects aim for. AAA is excellent and worth pursuing for body text in content-heavy sites, but it's not achievable for every color pair (e.g. brand colors that don't allow it). AA across the board is a great practical target.
Is contrast the only accessibility concern for color?+
No — it's necessary but not sufficient. Don't rely on color alone to convey information (red/green for error/success without an icon will fail color-blind users), watch out for fine text weights (3:1 may pass technically but still be hard to read at 12px), and remember that anti-aliasing softens contrast for thin strokes.
How does 'Find passing' work?+
It converts your foreground to HSL, then walks the lightness up and down in 1-point increments. The first lightness value that produces ≥4.5:1 against the background wins. If no value works (very rare — usually one of fg or bg is mid-gray), it returns nothing.
Is anything sent to a server?+
No. The contrast formula and color math run in your browser.
Related tools
CSS Gradient Generator
Design linear, radial, and conic CSS gradients with a live preview.
Box Shadow Generator
Build multi-layer CSS box-shadow styles with offset, blur, and spread controls.
Flexbox Playground
Experiment with Flexbox container and item properties visually.
Border Radius Generator
Create custom rounded corners with per-corner control and squircle presets.
Color Palette Generator
Generate color palettes from a base color using complementary, triad, and other schemes.
CSS Animation Generator
Build CSS @keyframes animations visually with sliders for transform, opacity, and color per step. Live preview.