Color Contrast Checker
Check color contrast ratios against WCAG 2.1 AA and AAA standards in real time. Auto-suggest accessible alternatives and simulate color blindness — free, no sign-up.
Aa
The quick brown fox jumps over the lazy dog.
This is how small text appears with your chosen color combination. Make sure it remains legible at all sizes.
17.06:1
Color Blind Preview
See how your color combination appears under different color vision deficiencies.
Aa
Sample text
Protanopia
Red-blind
16.8:1
Aa
Sample text
Deuteranopia
Green-blind
17.2:1
Aa
Sample text
Tritanopia
Blue-blind
16.9:1
Aa
Sample text
Achromatopsia
Total
17.0:1
Related Tools
Understanding WCAG Color Contrast
The Web Content Accessibility Guidelines (WCAG) define minimum contrast ratios to ensure text is readable by people with low vision or color vision deficiencies. Contrast ratios range from 1:1 (no contrast — same color) to 21:1 (maximum contrast — black on white).
WCAG AA requires a minimum ratio of 4.5:1 for normal text (under 18pt) and 3:1 for large text (18pt+ bold or 24pt+ regular). WCAG AAA raises the bar to 7:1 for normal text and 4.5:1 for large text. Most design systems target AA compliance as a minimum.
Contrast ratios are calculated using the relative luminance of two colors — a formula defined in WCAG 2.1 that accounts for how human eyes perceive brightness differently across the color spectrum. Green light appears brighter than blue light at the same intensity, which is why the formula weights RGB channels differently.
Color Blindness and Accessibility
Approximately 8% of men and 0.5% of women have some form of color vision deficiency. The most common types are protanopia (red-blind) and deuteranopia (green-blind), both of which make it difficult to distinguish red from green. Tritanopia (blue-blind) and achromatopsia (total color blindness) are much rarer.
Kulr's color blind simulation shows how your color combination appears under each condition, including the effective contrast ratio. This helps you design for all users, not just those with typical color vision. A good rule of thumb: if your design relies solely on color to convey meaning (red for error, green for success), always add a secondary indicator like an icon, text label, or pattern.
Frequently Asked Questions
What is a good contrast ratio?
For body text, aim for at least 4.5:1 (WCAG AA). For headings and large text (18pt+), 3:1 is the minimum. For the best readability, target 7:1 or higher (WCAG AAA). Ratios below 3:1 are generally considered poor and will be difficult to read for many users.
What's the difference between WCAG AA and AAA?
WCAG AA is the widely accepted minimum standard for web accessibility. It requires 4.5:1 for normal text and 3:1 for large text. WCAG AAA is a stricter standard requiring 7:1 and 4.5:1 respectively. Most organizations target AA compliance; AAA is recommended for content that needs maximum readability, like medical or government sites.
How does the auto-suggest feature work?
When your color combination fails AA compliance, the 'Suggest Accessible Alternative' button adjusts your foreground color to meet the 4.5:1 minimum ratio while staying as close as possible to your original color choice. It does this by shifting the lightness of the foreground up or down until the ratio is satisfied.
Does this tool check contrast for UI components?
WCAG 2.1 also requires 3:1 contrast for non-text UI components (buttons, form fields, icons) against their adjacent colors. You can test these by entering the component color as the foreground and its surrounding color as the background. The 'AA Large Text' badge (3:1 minimum) maps to this requirement.
Is color contrast the same as color difference?
No. Contrast ratio measures the relative luminance difference between two colors (how bright or dark they appear). Two colors can look very different (e.g., red and blue) but still have a poor contrast ratio because they have similar luminance. Always check the ratio, not just whether colors 'look different' to you.