Color Contrast Checker
Check color contrast ratios against WCAG 2.1 standards. See pass/fail results for AA and AAA levels with live preview and suggestions.
Pick a foreground and background color to check the contrast ratio against WCAG 2.1 standards.
Normal text preview (16px)
Large text preview (24px)
Contrast Ratio
11.50:1
Required: 4.5:1
Required: 3:1
Required: 7:1
Required: 4.5:1
About Color Contrast Checker
The Color Contrast Checker helps you verify that your text and background color combinations meet the accessibility standards defined in WCAG 2.1. Enter a foreground and background color to instantly see the contrast ratio and whether it passes or fails at each compliance level.
How It Works
Pick or type your foreground and background colors using the color pickers or HEX input fields. The tool calculates the relative luminance of each color and derives the contrast ratio using the WCAG 2.1 formula. Results update in real time as you adjust either color.
WCAG Compliance Levels
The checker tests against four criteria: AA Normal Text (4.5:1), AA Large Text (3:1), AAA Normal Text (7:1), and AAA Large Text (4.5:1). Each criterion shows a clear pass or fail badge so you can quickly identify which standards your color pair meets.
Live Preview
A preview panel shows sample text rendered in your chosen foreground color on the background color. This gives you an immediate visual sense of readability before you commit to the combination in your design.
Swap and Adjust
Use the swap button to reverse the foreground and background colors. If your combination fails a particular level, try nudging one of the colors slightly - even a small change in brightness can make the difference between failing and passing.
Everything runs in your browser. No color data is sent anywhere, and the tool works offline.
Frequently Asked Questions
What is a color contrast ratio?
A contrast ratio is a numeric value that describes the difference in brightness between two colors. It ranges from 1:1 (no contrast, identical colors) to 21:1 (maximum contrast, black on white). Higher ratios mean the text is easier to read against the background.
What are the WCAG contrast requirements?
WCAG 2.1 defines two conformance levels. Level AA requires a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text (18px bold or 24px regular). Level AAA requires 7:1 for normal text and 4.5:1 for large text.
What counts as large text under WCAG?
Large text is defined as 18 points (24 CSS pixels) or larger for regular weight, or 14 points (approximately 18.66 CSS pixels) or larger for bold weight. Large text has a lower contrast requirement because bigger characters are inherently easier to read.
How is the contrast ratio calculated?
The formula uses the relative luminance of each color. Relative luminance accounts for how the human eye perceives brightness across the color spectrum. The ratio is (L1 + 0.05) / (L2 + 0.05), where L1 is the lighter color and L2 is the darker.
What should I do if my colors fail the contrast check?
Try darkening the foreground or lightening the background (or vice versa) until the ratio meets the required threshold. This tool shows the exact ratio so you can make small adjustments. Even a small shift in lightness can push a failing pair into compliance.