Reference
Sample heading
Body text looks like this in this vision mode.
17.06:1
AA Pass
rgb(26, 26, 46) · hsl(240, 28%, 14%)
rgb(255, 255, 255) · hsl(0, 0%, 100%)
💎
Excellent contrast
Meets the highest AAA standard — excellent readability for everyone, including low vision.
17.06:1contrast ratioIndustry standard
✓ AA
Regular text — minimum for most websites✓ AA Large
Headings & bold text — easier threshold✓ AAA
Enhanced — best possible readability✓ AAA Large
Enhanced for headings — gold standardLc 103.93
Perceptual contrast Next-gen (W3C draft)
✓ Body text
Readable at paragraph size — needs Lc ≥ 60✓ Large text
Headlines & big UI — needs Lc ≥ 45HeadingThe quick brown fox jumps over the lazy dog. This is body text at a normal reading size.
Fine print and captions at 12pxHyperlinkButtonFilled
Color Blindness Simulation
Red-blind · ~1.3%
Sample heading
Body text looks like this in this vision mode.
16.92:1
AA Pass
Green-blind · ~5%
Sample heading
Body text looks like this in this vision mode.
17.12:1
AA Pass
Blue-blind · ~0.01%
Sample heading
Body text looks like this in this vision mode.
17.06:1
AA Pass
About the Contrast Checker
This contrast checker tests color pairs and full palettes against WCAG 2.1 accessibility standards and the APCA algorithm from the WCAG 3.0 draft. Enter two colors and get an instant verdict — plain language first, technical numbers second — along with a live text preview, dark mode toggle, color blindness simulation, and a palette audit matrix for up to 12 colors. All processing runs in your browser; no color data leaves your device.
Most contrast checkers stop at WCAG 2.1 ratios. This tool also computes the APCA (Accessible Perceptual Contrast Algorithm) Lightness Contrast value, which models how human vision perceives lightness differences between text and its background. APCA gives more accurate guidance for light text on dark backgrounds and for large display text, where WCAG 2.1 can be overly strict or lenient. Both scores are shown together so you can make informed decisions for your specific use case.
Key Features of the Contrast Checker
- Beginner-friendly verdicts: Plain-language results ("Great contrast!", "Needs improvement") appear before technical numbers, so the tool is useful even without prior accessibility knowledge.
- WCAG 2.1 contrast ratio: Tests four levels — AA Normal (4.5:1), AA Large (3:1), AAA Normal (7:1), and AAA Large (4.5:1) — with clear pass/fail badges and plain-language explanations.
- APCA perceptual contrast: Computes the Lc (Lightness Contrast) value with a visual meter and thresholds for body text (Lc 60) and large text (Lc 45).
- Palette audit matrix: Add up to 12 colors and view every combination in an N×N grid. Click any cell to drill into that specific pair.
- Import from CSS or Tailwind: Paste CSS custom properties, a Tailwind config snippet, or a plain hex list to populate the palette instantly.
- Live preview with dark mode toggle: See heading, body, small text, and UI elements (filled and outline buttons) rendered in your colors, with a one-click switch between light and dark backgrounds.
- Color blindness simulation: Preview your pair through protanopia, deuteranopia, and tritanopia filters. Delta E 2000 distinguishability scores show whether colors remain distinct under each condition.
- Auto-fix suggestions: When a pair fails AA, the tool finds the nearest passing color by adjusting lightness. One click applies the fix.
- Export: Download or copy results as Markdown, JSON, CSS custom properties, or a Tailwind config snippet.
- Shareable URLs: Every color selection and palette is encoded in the URL, so you can share a link directly with teammates.
How Does Color Contrast Checking Work?
WCAG 2.1 defines contrast as the ratio of relative luminances between two colors. Relative luminance measures how bright a color appears after converting its sRGB values to a linear light scale and weighting the red, green, and blue channels according to human perception (green contributes most; blue least). The formula produces a ratio from 1:1 (no contrast) to 21:1 (black on white). A ratio of 4.5:1 or higher means normal body text meets the WCAG AA minimum.
APCA takes a different approach. Instead of a symmetric luminance ratio, it models how the human visual system perceives lightness differences between a text color and its background. The result is an Lc value ranging roughly from 0 to +/- 108. Positive values indicate dark text on a light background; negative values indicate light text on dark. This polarity matters: the same two colors produce different APCA scores depending on which is foreground and which is background. For dark mode interfaces, where WCAG 2.1 often over-penalizes bright text, APCA provides more accurate guidance.
How to Use the Contrast Checker
- Pick a foreground color using the color picker, or type a hex, RGB, or HSL value into the input field.
- Pick a background color the same way. Use the swap button to quickly reverse the pair.
- Read the verdict banner at the top — it shows a plain-language summary like "Great contrast!" before the ratio numbers.
- Review the WCAG 2.1 ratio and APCA Lc value. Expand "What is WCAG?" for plain-language explanations of each compliance level.
- If the pair fails AA, use the auto-fix buttons to adjust the foreground or background to the nearest passing color.
- To audit a full palette, expand the Palette Audit section. Add colors manually or use the import button to paste CSS variables, a Tailwind config, or a hex list.
- Click any cell in the matrix to load that color pair into the Quick Check panel for detailed analysis.
- In the Live Preview section, toggle between light and dark mode to verify contrast holds in both contexts.
- Open the Color Blindness Simulation to check distinguishability under protanopia, deuteranopia, and tritanopia.
- Export your results or copy the shareable URL to send to teammates.
Common Use Cases for Contrast Checking
- Web design: Verify that body text, headings, links, and buttons meet WCAG AA before shipping a page.
- Design system audits: Import all color tokens at once, run the palette matrix, and export a compliance report to document accessibility coverage.
- Accessibility remediation: Identify failing pairs on an existing site and use auto-fix to find the closest compliant alternative with minimal visual change.
- Brand guidelines: Confirm that brand colors meet accessibility requirements before publishing them in a style guide or design system.
- Dark mode validation: Use the live preview dark mode toggle and APCA scores together to verify that inverted schemes remain readable.
- Team collaboration: Share a URL that encodes the exact palette and color pair so reviewers see the same state without installing anything.
Frequently Asked Questions
Is my data safe when using this contrast checker?
All calculations run entirely in your browser. No color values, palette data, or exported reports are sent to any server. You can confirm this by checking your browser's network tab while using the tool.
What is the difference between WCAG 2.1 and APCA contrast?
WCAG 2.1 uses a luminance ratio that treats foreground and background symmetrically — swapping the two colors produces the same score. APCA models human perception more accurately by accounting for which color is text and which is the surface behind it. This polarity means a bright color on dark and dark on bright can yield different APCA scores. APCA is especially useful for dark mode interfaces, where WCAG 2.1 can produce misleading results.
What contrast ratio do I need for WCAG AA compliance?
Normal text (under 18pt or 14pt bold) requires at least 4.5:1. Large text (18pt or larger, or 14pt bold) requires at least 3:1. WCAG AAA raises these to 7:1 and 4.5:1 respectively.
How do I test a full color palette for accessibility?
Expand the Palette Audit section and add your colors manually, or use the import button to paste CSS custom properties, a Tailwind config snippet, or a plain list of hex values. The tool builds an N×N matrix showing the WCAG result for every foreground/background combination. Click any cell to open that pair in the Quick Check panel.
Can I import colors from my CSS or Tailwind config?
Yes. The import dialog accepts CSS custom property blocks (--color-primary: #1a73e8;), Tailwind config color objects, and plain newline-separated hex values. Parsed colors are added to the palette immediately.
How accurate is the color blindness simulation?
The simulation uses established Brettel/Vienot color vision deficiency matrices to approximate how colors appear under protanopia, deuteranopia, and tritanopia. Delta E 2000 scores measure whether two colors remain perceptually distinguishable under each condition. No simulation perfectly replicates individual variation, but these models are widely used in accessibility research and professional design tools.
Related Tools
- Color Picker — sample colors from your screen and convert between hex, RGB, HSL, and OKLCH formats.
- Color Picker from Image — extract a color palette from an uploaded image, then check those colors here for accessibility.
- Color Wheel — explore color relationships and harmonies to find accessible color combinations.