All Tools
Accessibility

COLOR CONTRAST

Check any two colors against WCAG AA and AAA standards. Instant results, all in your browser.

#1f2937 Foreground
#ffffff Background

Click "Suggest Fix" to find a color that passes AA.

AA Normal Text
Requires a contrast ratio of at least 4.5:1. This is the minimum standard for body text under WCAG 2.1 Level AA.
AA Large Text
Requires at least 3:1. Applies to text ≥18px bold or ≥24px regular.
AAA Normal Text
Requires at least 7:1. The enhanced standard for body text.
AAA Large Text
Requires at least 4.5:1. The enhanced standard for large text.
WCAG 2.1 Contrast Ratio
15.35
:1
AA Normal AA Large AAA Normal AAA Large
100.0
Lc
Excellent Body text
100
15.35
WCAG Ratio
100
APCA Lc
PASS
AA Normal
PASS
AAA Normal
0.073
Fg Luminance
0.907
Bg Luminance
Fg
Darker
PASS
All Levels

Upload an image, then click anywhere on it to pick a color.

Upload an image to pick colors

No saved color pairs yet.

The quick brown fox jumps over the lazy dog. (16px normal text)

The quick brown fox jumps over the lazy dog. (24px bold)

PASS means your color combination meets WCAG 2.1 guidelines at that level. Text is readable for most users, including those with low vision (approximately 20/40 vision).

FAIL means the contrast is insufficient. Users with low vision or viewing in bright environments may struggle to read the text. Consider darkening the foreground or lightening the background.

Remember: WCAG AA is the legal standard for most websites (Section 508, EN 301 549). AAA is a higher goal but not always achievable — and that's okay.

Enter hex values (one per line or comma-separated) to generate a contrast matrix.

Frequently Asked Questions

What is color contrast ratio?
The contrast ratio is a numeric value (from 1:1 to 21:1) that measures the difference in luminance between two colors. WCAG 2.1 defines three thresholds: AA normal text requires 4.5:1, AA large text requires 3:1, AAA normal text requires 7:1, and AAA large text requires 4.5:1. The formula uses relative luminance calculated from the sRGB color space.
What is the difference between WCAG AA and AAA?
WCAG AA is the minimum acceptable level for most websites and legal compliance (e.g., Section 508, EN 301 549). AAA is a higher, enhanced standard. AA requires a 4.5:1 ratio for normal text and 3:1 for large text. AAA requires 7:1 for normal text and 4.5:1 for large text. Not all design goals can meet AAA — aim for AA as a baseline and enhance where possible.
How do I fix colors that fail contrast checks?
Darken the foreground or lighten the background to increase the luminance difference. If the ratio is close to passing (within 0.5:1), small adjustments of 10-20 points in lightness (HSL L channel) often suffice. Try darkening text to near-black (#1a1a1a instead of #333333) or lightening backgrounds to near-white (#f5f5f5 instead of #e0e0e0).
Is this tool accurate for web design?
Yes. It uses the same WCAG 2.1 relative luminance formula that W3C accessibility evaluation tools use. The calculation follows the sRGB specification: linearizing each channel, applying the ITU-R BT.709 coefficients (0.2126 R + 0.7152 G + 0.0722 B), and applying the contrast ratio formula (L1 + 0.05) ÷ (L2 + 0.05). Browser rendering may vary slightly due to sub-pixel antialiasing, but the calculated ratio is the standard reference.
Do you simulate color blindness?
Yes. The tool includes a color blindness simulator that supports protanopia (red-blind), deuteranopia (green-blind), tritanopia (blue-blind), and achromatopsia (monochrome). Select the simulation type from the dropdown to see how your color pair appears to users with each condition. The simulation uses the LMS cone response model for accurate results.
What is APCA contrast and how is it different from WCAG?
APCA (Accessible Perceptual Contrast Algorithm) is the proposed contrast method for WCAG 3.0. Unlike WCAG 2.1's simple luminance ratio, APCA uses a perceptual quantizer that accounts for human visual perception differences across lightness levels. It produces an Lc score where 90+ is preferred for body text and 45+ is acceptable for large text. APCA is more sensitive to dark-mode contrast and provides scores that better match perceived readability.
Is my color data stored or sent anywhere?
No. All contrast calculations run entirely in your browser using JavaScript. No color values, hex codes, or any other data are sent to any server. The tool works offline after the initial page load and nothing is tracked or logged.

How to Use

01

Pick a Foreground Color

Use the color picker or type a hex code for your text, icon, or UI element color (e.g.,

02

Pick a Background Color

Choose the background color behind that element. The tool compares the two to compute the contrast ratio.

03

Read the Results

The tool shows the contrast ratio (e.g., 9.83:1) and pass/fail status for all four WCAG levels — AA Normal, AA Large, AAA Normal, AAA Large.

04

Adjust to Pass

If your pair fails a level, tweak either color using the picker or hex input and watch the results update instantly. Small lightness adjustments of 10-20% often turn a fail into a pass.

05

Use the Live Preview

The preview section shows sample text rendered in your chosen colors at normal (16px) and large (24px bold) sizes so you can see how readability looks in context.

06

Fine-Tune with HSL Sliders

Switch between Foreground and Background tabs to adjust Hue, Saturation, and Lightness via sliders. The contrast updates instantly as you drag.

07

Simulate Color Blindness

Select a color vision deficiency type (protanopia, deuteranopia, tritanopia, or achromatopsia) to preview how your color pair looks to color-blind users.

08

Pick Colors from an Image

Upload an image and click anywhere on it to extract a hex color. Use the → Foreground or → Background buttons to apply the picked color instantly.

09

Generate a Batch Contrast Matrix

Enter multiple hex colors (one per line) and click Generate Matrix to see a table showing which combinations pass or fail WCAG AA at a glance.

How to Calculate

The contrast ratio is calculated using the WCAG 2.1 formula: L = 0.2126 * R + 0.7152 * G + 0.0722 * B, where each channel is first linearized from sRGB. The ratio = (L1 + 0.05) ÷ (L2 + 0.05), with L1 being the lighter color. AA normal text requires ≥4.5:1, AA large text ≥3:1, AAA normal text ≥7:1, and AAA large text ≥4.5:1. The tool also computes APCA contrast (the W3C WCAG 3.0 candidate) using the perceptual quantizer function q(Y) for a more human-readable contrast score measured in Lc units.

About the Color Contrast Checker

The Color Contrast Checker is a free online tool that evaluates the readability of any two colors against WCAG 2.1 AA/AAA and the APCA perceptual contrast standard (WCAG 3.0 candidate). Simply pick a foreground and background color to instantly see the contrast ratio, pass/fail badges, color blindness simulation, HSL fine-tuning, batch contrast matrix, and more — all in your browser.

Accessible color contrast is essential for inclusive web design. Poor contrast affects users with low vision, color blindness, or viewing in bright environments. By checking your color combinations before publishing, you ensure your content is readable by the widest possible audience while meeting legal accessibility requirements like Section 508 and EN 301 549.

100% free and private — all calculations happen in your browser. No sign-up, no server uploads, no data collection. Just instant, accurate WCAG compliance checking for designers and developers.

Related Tools

Color Palette Generator
Color Palette Extractor
CSS Filter & Effect Generator
CSS Box Shadow Generator
Page Grader