Advertisement

Color Contrast Checker

Check color contrast ratios for WCAG 2.1 AA and AAA compliance with real-time calculation and pass/fail indicators.

The quick brown fox jumps over the lazy dog

This is a preview of normal body text at 16px. Check how readable this text appears against the background color. Good contrast ensures that all users, including those with visual impairments, can read your content comfortably.

Small text (14px) requires even better contrast to remain legible.

Contrast Ratio

17.06:1

Excellent contrast - passes all WCAG criteria

AA Normal Text

Pass

AA Large Text

Pass

AAA Normal Text

Pass

AAA Large Text

Pass

WCAG 2.1 Contrast Requirements

Level AA (Minimum)

  • Normal text: 4.5:1 minimum
  • Large text (18pt+): 3:1 minimum
  • UI components: 3:1 minimum

Level AAA (Enhanced)

  • Normal text: 7:1 minimum
  • Large text (18pt+): 4.5:1 minimum
Advertisement

Related Tools

Color Converter

Convert colors between HEX, RGB, HSL, CMYK, and more formats instantly.

Palette Generator

Generate beautiful, accessible color palettes with WCAG compliance checking. Extract colors from images and export to CSS/JSON.

Color Picker

Pick any color from screen or input. Get HEX, RGB, HSL values instantly.

Gradients

Create beautiful CSS gradients with a visual editor. Linear, radial, and conic gradients.

Advertisement

Frequently Asked Questions

What is a color contrast ratio?
A contrast ratio is a numerical value that describes the difference in luminance (perceived brightness) between two colors. It ranges from 1:1 (no contrast, identical colors) to 21:1 (maximum contrast, black on white). The ratio is calculated using the relative luminance values of the foreground and background colors according to the WCAG 2.1 formula.
What are the WCAG contrast requirements?
WCAG 2.1 defines two conformance levels for contrast. Level AA requires a minimum contrast ratio of 4.5:1 for normal text (under 18pt or 14pt bold) and 3:1 for large text (18pt+ or 14pt+ bold). Level AAA requires 7:1 for normal text and 4.5:1 for large text. These ratios ensure text is readable by people with moderately low vision.
What is the difference between WCAG AA and AAA?
WCAG AA is the minimum recommended standard for web accessibility and is required by most accessibility laws worldwide. WCAG AAA is the enhanced standard that provides better readability for users with more severe visual impairments. While AAA is ideal, AA is considered the practical target for most websites because AAA contrast requirements can significantly limit design choices.
How is relative luminance calculated?
Relative luminance is calculated by first converting sRGB color values to linear RGB by applying a gamma correction formula, then combining the linear values using the luminance coefficients: L = 0.2126 * R + 0.7152 * G + 0.0722 * B. The result is a value between 0 (darkest black) and 1 (brightest white) that represents how bright the color appears to the human eye.
Why does color contrast matter for accessibility?
Sufficient color contrast ensures that text and interactive elements are readable by people with visual impairments, including low vision, color blindness, and age-related vision changes. Approximately 1 in 12 men and 1 in 200 women have some form of color vision deficiency. Good contrast benefits everyone, including users viewing screens in bright sunlight or on low-quality displays.
What counts as "large text" in WCAG?
Large text is defined as text that is at least 18 point (24px) in regular weight, or at least 14 point (approximately 18.66px) in bold weight. Large text has lower contrast requirements because larger characters are inherently easier to read. When designing interfaces, headings often qualify as large text while body copy does not.
Can I use this tool for UI component colors?
Yes. WCAG 2.1 Success Criterion 1.4.11 requires non-text UI components and graphical objects to have a contrast ratio of at least 3:1 against adjacent colors. This includes form inputs, buttons, icons, and charts. Use this tool to verify that your UI components meet this requirement by checking their colors against their backgrounds.
Is this tool accurate?
Yes. This tool implements the exact contrast ratio formula specified in WCAG 2.1 Success Criterion 1.4.3. It calculates relative luminance using the sRGB color space linearization and computes the contrast ratio as (L1 + 0.05) / (L2 + 0.05), where L1 is the lighter color luminance and L2 is the darker. All calculations happen in your browser with full floating-point precision.

How to Use the Color Contrast Checker

Ensuring adequate color contrast between text and background is one of the most critical aspects of web accessibility. Our color contrast checker calculates the contrast ratio between any two colors and instantly tells you whether the combination meets WCAG 2.1 Level AA and Level AAA requirements for both normal and large text.

Step 1: Choose your foreground color. Use the color picker or enter a hex code for your text or foreground element. The tool accepts standard 6-digit hex codes with or without the # prefix. The color picker provides a visual interface for exploring different hues, saturation levels, and brightness values.

Step 2: Choose your background color. Select or enter the background color behind your text. The tool immediately calculates the contrast ratio between the two colors and displays the result. You can see a live preview of how your text will look against the chosen background, making it easy to evaluate readability at a glance.

Step 3: Check the compliance results. The tool displays pass/fail badges for four WCAG criteria: AA Normal Text (4.5:1), AA Large Text (3:1), AAA Normal Text (7:1), and AAA Large Text (4.5:1). Green badges indicate passing combinations while red badges indicate failing ones. Aim for at least AA compliance for all text on your website.

Understanding WCAG Color Contrast Guidelines

The Web Content Accessibility Guidelines (WCAG) 2.1 established specific contrast ratio requirements to ensure web content is readable by people with visual impairments. These guidelines are not just best practices; they are legal requirements in many jurisdictions. The Americans with Disabilities Act (ADA) in the United States, the European Accessibility Act, and similar laws worldwide reference WCAG as the standard for web accessibility compliance.

The contrast ratio is calculated using the relative luminance of two colors. Relative luminance represents how bright a color appears to the human eye, accounting for the fact that our eyes are most sensitive to green light, moderately sensitive to red, and least sensitive to blue. The WCAG formula converts sRGB values to linear light values and then applies luminance coefficients (0.2126 for red, 0.7152 for green, 0.0722 for blue) to compute the perceived brightness.

A common misconception is that contrast is simply about light versus dark. In reality, two colors can have very different hues but similar luminance, resulting in poor contrast despite looking "different." For example, a medium green (#6B8E23) on a medium red (#CD5C5C) background may look distinctly different but has a contrast ratio of only 1.5:1, far below the 4.5:1 minimum. This is why checking contrast ratios mathematically is essential rather than relying on visual judgment alone.

Why Color Contrast Matters

Legal compliance. Many countries require websites to meet WCAG 2.1 Level AA standards. Failure to comply can result in lawsuits, fines, and mandatory remediation. In the United States alone, web accessibility lawsuits have increased significantly year over year, with contrast violations being among the most commonly cited issues. Checking contrast during the design phase prevents costly legal problems later.

User experience for everyone. Good contrast is not just for users with visual impairments. Everyone benefits from readable text, especially in challenging viewing conditions like bright sunlight, dimly lit rooms, or on screens with poor color reproduction. Mobile users in particular frequently view websites in variable lighting conditions where low-contrast text becomes unreadable.

Brand accessibility. Many brands struggle with contrast because their brand colors were chosen for aesthetic appeal without considering accessibility. This tool helps designers find accessible color combinations that stay true to brand identity. Often, a small adjustment in lightness or saturation is enough to meet WCAG requirements while preserving the brand look and feel.

Inclusive design philosophy. Designing for accessibility benefits a broader audience than you might expect. Approximately 2.2 billion people worldwide have some form of vision impairment. By ensuring your color combinations meet WCAG standards, you are making your content accessible to the largest possible audience, which is both ethically responsible and commercially smart.

Tips for Achieving Good Color Contrast

Start with your text colors and work outward. Choose a dark text color for light backgrounds or a light text color for dark backgrounds, then adjust until you achieve at least a 4.5:1 ratio. If your brand colors do not meet the minimum ratio, try darkening or lightening one of the colors slightly. Even a 10-15% adjustment in lightness can make the difference between failing and passing WCAG requirements without noticeably changing the visual design.

Test your designs across multiple devices and screen settings. A color combination that looks acceptable on a high-end monitor may fail on a budget laptop screen or an older mobile phone. Use this contrast checker as part of your regular design workflow to catch potential accessibility issues before they reach production.

Advertisement