Design tool
Color Contrast Checker
Enter a foreground and background color in hex format to check their contrast ratio against WCAG accessibility standards. See at a glance whether your palette meets AA and AAA requirements for different text sizes and UI elements.
The quick brown fox jumps over the lazy dog
Large sample text
Contrast ratio
18.13:1
How the contrast checker works
Contrast ratio is a measure of how different two colors are in brightness. The Web Content Accessibility Guidelines (WCAG) use contrast ratios to ensure text is readable by people with low vision or color blindness. This tool calculates the ratio from the relative luminance of each color, which is a weighted sum of the linearized sRGB channels. All calculations run locally in your browser—nothing you enter is sent anywhere.
The contrast ratio formula
Black on white is the highest possible contrast, working out to exactly 21:1. Two identical colors give the minimum ratio of 1:1. Contrast ratios range from 1 to 21, and the higher the ratio, the easier the text is to read.
WCAG requirements explained
Large text is defined as 18pt (24px) or larger at normal font weight, or 14pt (18.66px) or larger at bold font weight. The AAA level is a higher standard that provides enhanced accessibility for people with visual impairments.
- AA normal text: 4.5:1 minimum ratio required
- AA large text: 3:1 minimum ratio required
- AAA normal text: 7:1 minimum ratio required
- AAA large text: 4.5:1 minimum ratio required
- UI components & graphics: 3:1 minimum ratio required
Tips for fixing failing contrast
If your color pair fails a contrast threshold, try darkening the foreground color or lightening the background, or vice versa. Mid-tone grays like #999999 often fail on white backgrounds because they sit around 2.8:1. Avoid placing light text on light backgrounds or dark text on dark backgrounds. Always test both light and dark themes if your design supports them, and remember that contrast requirements apply to all users—not just those with color blindness. Never rely on color alone to communicate important information; use text labels, icons, or patterns as well.
Frequently asked questions
What contrast ratio do I need for accessibility?
It depends on the type of content and your target accessibility level. WCAG level AA, the most common standard, requires 4.5:1 for normal text and 3:1 for large text (18pt+). AAA, a stricter standard, requires 7:1 and 4.5:1. For non-text elements like icons or borders, both levels require 3:1.
What counts as large text?
Large text is defined as 18pt (approximately 24px) or larger with normal font weight, or 14pt (approximately 18.66px) or larger with bold font weight. Larger text is easier to read, so WCAG allows a lower contrast ratio for it. If you are unsure whether your text qualifies as large, measure the actual rendered size in your design.
What is the difference between AA and AAA?
WCAG AA and AAA are two levels of conformance. AA is the minimum recommended level for most websites and applications. AAA is a higher standard that provides greater accessibility, especially for users with visual impairments. Achieving AAA is more restrictive but benefits a wider audience.
Does contrast apply to placeholder text and disabled controls?
Disabled controls are exempt from contrast requirements because users cannot interact with them. However, placeholder text is not exempt—it should meet the same contrast standards as regular text. If your placeholder is too faint, users with low vision may not be able to see it.
Why does my gray text fail the contrast check?
Mid-tone grays like #999999 have a contrast ratio around 2.8:1 on white, which fails even the AA standard. Pure gray sits roughly halfway between black and white in brightness, so it does not create enough contrast. To fix this, use a darker gray (closer to #666666 or darker) or a more saturated color.