🎨 Contrast Checker
Measure WCAG color contrast ratios instantly — with live UI preview, automatic color suggestions, and bulk checking for entire design systems.
The quick brown fox jumps over the lazy dog
Sample Heading H2
Paste color pairs one per line — format: #FF6500 on #FFFFFF
Each pair is evaluated against all four WCAG criteria simultaneously.
| Foreground | Background | Ratio | AA Normal | AA Large | AAA Normal | AAA Large |
|---|
About This Contrast Checker
A contrast checker measures the luminance difference between two colors and reports a contrast ratio — a number from 1:1 (identical) to 21:1 (black on white). WCAG 2.1 requires a minimum 4.5:1 ratio for normal text and 3:1 for large text to meet AA accessibility standards.
This contrast checker is a browser-based accessibility tool used by UI designers, developers, and accessibility specialists to verify that text and background color combinations meet WCAG compliance standards — processing everything client-side with results updating as colors change.
WCAG 2.1 defines two conformance levels for color contrast: AA (the minimum standard required by most web accessibility legislation) and AAA (the enhanced standard for critical content). AA requires a 4.5:1 ratio for normal text and 3:1 for large text defined as 18pt regular or 14pt bold. AAA raises those thresholds to 7:1 and 4.5:1 respectively. This contrast checker evaluates all four criteria simultaneously and shows exactly which level each color pair achieves.
Beyond single-pair analysis, the tool includes three capabilities that most contrast checkers don't offer: a Bulk mode for checking entire design systems at once with CSV export, an automatic color suggestion engine that adjusts HSL lightness until the pair reaches AA compliance, and a live UI preview rendering four real interface components with the exact colors you've chosen. According to WHO data, 1 in 12 men and 1 in 200 women have some form of color vision deficiency — making contrast verification a critical step in accessible design, not an afterthought.
Checks contrast ratios and suggests compliant alternatives client-side — no color data leaves your browser at any stage.
How to Use This Contrast Checker
How the Contrast Checker Works
- Select your foreground and background colors using the color pickers or type any valid hex code directly into the input fields.
- The contrast ratio updates instantly and four WCAG badges — AA Normal, AA Large, AAA Normal, AAA Large — show pass or fail in real time.
- Check the Live Preview section to see how your chosen colors render on body text, headings, buttons, and badge components.
- If the pair fails AA Normal Text, use the Suggested Fix section to apply the nearest AA-compliant foreground color automatically.
- Switch to Bulk mode to paste multiple color pairs and export the full results table as a CSV for documentation or developer handoff.
WCAG AA is the baseline standard for most digital products and legal accessibility requirements under the ADA, European Accessibility Act, and EN 301 549. AAA is recommended for healthcare content, legal notices, or any interface where maximum legibility is essential. Large text — defined as 18pt regular (approximately 24px) or 14pt bold (approximately 18.67px) — carries lower thresholds because its scale compensates for reduced contrast between colors.
Use our Color Tools to build and validate complete accessible color palettes from the ground up.
Who Uses a Contrast Checker
- UI/UX designers run a contrast checker before design handoff — catching accessibility failures at the source rather than during QA or post-launch remediation audits.
- Front-end developers validate component color combinations as they build, confirming text, button, and border colors meet WCAG thresholds before pushing to production.
- Accessibility specialists audit existing design systems for WCAG compliance, using Bulk mode to process entire token libraries efficiently and export results for client reports.
- Product managers verify that brand colors meet the minimum contrast ratio before approving a new design system or rebrand — reducing expensive remediation costs later in the cycle.
Explore all our Color Tools for additional utilities to build, convert, and validate professional color systems.
Frequently Asked Questions
What is a contrast checker?
A contrast checker measures the luminance difference between a foreground color and a background color, reporting a ratio from 1:1 (identical colors) to 21:1 (black on white). It checks whether the pair meets WCAG 2.1 AA and AAA accessibility standards, which define minimum contrast ratios for normal text, large text, and UI components across digital interfaces.
What contrast ratio does WCAG require?
WCAG 2.1 AA requires a minimum 4.5:1 contrast ratio for normal text and 3:1 for large text. The enhanced AAA standard requires 7:1 for normal text and 4.5:1 for large text. Most legal accessibility requirements — ADA, European Accessibility Act, EN 301 549 — reference the AA standard as their baseline threshold.
What is the difference between WCAG AA and AAA?
WCAG AA is the minimum conformance level required by most web accessibility legislation. AAA is the enhanced level, recommended for content where maximum readability is critical — healthcare, legal, or financial interfaces. AA Normal Text requires 4.5:1; AAA Normal Text requires 7:1. Many organisations target AA across the board and AAA for primary body content where sustained reading occurs.
What counts as large text in WCAG?
WCAG defines large text as 18 points (approximately 24px) or larger for regular-weight text, or 14 points (approximately 18.67px) or larger for bold text. Large text carries lower contrast thresholds — 3:1 for AA and 4.5:1 for AAA — because its scale already aids legibility compared to small body text at the same contrast ratio.
How is color contrast ratio calculated?
Contrast ratio uses the WCAG 2.1 relative luminance formula. Each RGB channel is linearized via gamma correction: values ≤ 0.04045 are divided by 12.92; higher values use the formula ((v + 0.055) / 1.055)^2.4. The linearized channels combine as 0.2126R + 0.7152G + 0.0722B to produce relative luminance L. The contrast ratio is then (lighter L + 0.05) / (darker L + 0.05).
Can I check multiple color pairs at once?
Yes. Switch to Bulk mode and paste color pairs using the format #FF6500 on #FFFFFF, one per line. Click Check All to evaluate every pair against all four WCAG criteria simultaneously. Export the complete results table as a CSV file for design documentation, developer handoff, or formal accessibility audit reports.
What should I do if my colors fail WCAG contrast?
When a color pair fails AA Normal Text (4.5:1), the Suggested Fix section appears automatically. The tool adjusts the foreground color's HSL lightness in 1% steps until the ratio reaches 4.5:1, showing the corrected hex value and a color swatch. Click "Use Suggested Colors" to apply the compliant pair to the main inputs and verify the result instantly.