Color Contrast Checker

About Color Contrast Checker

Color contrast is one of the most important factors in web accessibility. When text and background colors lack sufficient contrast, users with visual impairments, color blindness, or those viewing screens in bright sunlight struggle to read content. The Web Content Accessibility Guidelines (WCAG) 2.1, published by the W3C, define specific contrast ratio thresholds that websites must meet to be considered accessible. This tool calculates the contrast ratio between any two colors and checks compliance against all WCAG 2.1 levels instantly.

The contrast ratio is derived from the relative luminance of two colors using a formula defined in WCAG 2.1. Relative luminance measures the perceived brightness of a color on a scale from 0 (black) to 1 (white), accounting for human vision sensitivity to different wavelengths. The ratio ranges from 1:1 (no contrast, identical colors) to 21:1 (maximum contrast, black on white). Higher ratios indicate better readability.

WCAG 2.1 Compliance Levels

WCAG defines two conformance levels for text contrast. Level AA is the minimum recommended standard and requires a contrast ratio of at least 4.5:1 for normal text (under 18pt or 14pt bold) and 3:1 for large text (18pt and above, or 14pt bold and above). Level AAA is the enhanced standard, requiring 7:1 for normal text and 4.5:1 for large text. Most legal accessibility requirements, including the ADA in the United States and EN 301 549 in Europe, reference Level AA as the baseline.

Achieving proper contrast is not just a legal requirement; it directly impacts your user experience and business metrics. Studies show that accessible websites have lower bounce rates, higher engagement, and broader reach. Approximately 1 in 12 men and 1 in 200 women have some form of color vision deficiency, and millions more have low vision conditions. Ensuring adequate contrast means your content works for everyone, including users on older screens or in challenging lighting conditions.

How to Use This Tool

Enter your foreground (text) color and background color using the color picker or by typing a hex code. The tool instantly calculates the contrast ratio and shows pass or fail status for all four WCAG thresholds. If your combination fails AA compliance, the tool suggests adjusted foreground colors that achieve the required 4.5:1 ratio while staying close to your original choice. You can click any suggestion to apply it, or use the preset combinations for quick testing.

Frequently Asked Questions

Q: What is a good contrast ratio for body text?
A: For body text (normal sized text, typically 16px or smaller), WCAG requires a minimum of 4.5:1 for Level AA and 7:1 for Level AAA. A ratio of 7:1 or higher is recommended for the best readability across all conditions. Black text on white (#000000 on #FFFFFF) provides the maximum ratio of 21:1.

Q: What counts as "large text" in WCAG?
A: Large text is defined as 18pt (24px) and above at regular weight, or 14pt (approximately 18.66px) and above at bold weight. Large text has a lower contrast requirement of 3:1 for AA and 4.5:1 for AAA because larger characters are inherently easier to read.

Q: Does this tool support colors other than hex?
A: This tool accepts hex color codes (e.g., #4F46E5) and includes a visual color picker. If you have RGB or HSL values, you can use the color picker to select your color visually, or convert your values to hex first using our Hex to RGB Converter.

Q: Why do my brand colors fail the contrast check?
A: Many brand palettes are designed for aesthetic appeal rather than accessibility. Medium-tone colors like light blues, greens, and purples often fail against white backgrounds. Use the color suggestions provided by this tool to find an accessible shade that stays close to your brand identity, or use your brand colors only for large text and decorative elements.

Q: Is my data safe when using this tool?
A: Yes. This tool runs entirely in your browser using client-side JavaScript. No color data is sent to any server. You can verify this by checking the Network tab in your browser developer tools.