Contrast Checker
Enter foreground and background colors to check WCAG contrast compliance.
Sample Heading
The quick brown fox jumps over the lazy dog.
Small body text for testing readability at normal size.
How to Use
- Enter a foreground (text) color in hex format.
- Enter a background color in hex format.
- View the contrast ratio and WCAG pass/fail results.
Features
- WCAG 2.1 contrast ratio calculation
- AA and AAA compliance for normal and large text
- Live preview of text on background
- Works entirely in your browser
Why Use a Contrast Checker
Web accessibility is not optional. Millions of people around the world have low vision, color blindness, or other visual impairments that make it difficult or impossible to read text with insufficient contrast against its background. The Web Content Accessibility Guidelines (WCAG) establish minimum contrast ratios to ensure that digital content is usable by everyone. In many countries, meeting these standards is a legal requirement for government and public-facing websites.
A contrast checker takes the guesswork out of accessibility compliance. Instead of eyeballing whether light gray text on a white background is readable, you get a precise numerical ratio and an instant pass or fail result against both WCAG AA and AAA levels. AA is the minimum standard most organizations aim for, requiring a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text. AAA is the enhanced standard with ratios of 7:1 and 4.5:1 respectively.
Designers, developers, and content managers should check contrast early in the design process, not as an afterthought. Catching contrast issues before development begins saves time and money. This tool lets you experiment with color combinations in real time, seeing the live preview and compliance results update as you adjust your colors. It is an essential step in building websites that are both beautiful and inclusive.
Frequently Asked Questions
What is a good contrast ratio for body text?
For normal-sized body text, WCAG AA requires a minimum contrast ratio of 4.5:1. For the stricter AAA level, the minimum is 7:1. As a general rule, the higher the contrast ratio, the more readable your text will be for all users, including those viewing your site in bright sunlight or on low-quality displays.
What counts as large text under WCAG?
WCAG defines large text as 18 points (24px) or larger for regular weight, or 14 points (roughly 18.66px) or larger for bold weight. Large text has a lower minimum contrast requirement of 3:1 for AA and 4.5:1 for AAA because bigger letters are inherently easier to read.
Does contrast checking matter for color-blind users?
Yes. While color blindness primarily affects the ability to distinguish between certain hues, contrast ratios measure luminance difference, which impacts readability regardless of color perception. A high contrast ratio ensures that text remains legible even when a user cannot perceive the specific colors being used. However, you should also avoid relying solely on color to convey information.
How is the contrast ratio calculated?
The contrast ratio is calculated using the relative luminance of the two colors according to the WCAG 2.1 formula. Relative luminance is a measure of how bright a color appears, taking into account that the human eye is more sensitive to green light than red or blue. The ratio ranges from 1:1 (no contrast, identical colors) to 21:1 (maximum contrast, black on white).