WCAG 2.1 is the Web Content Accessibility Guidelines version 2.1, published by the World Wide Web Consortium (W3C). It defines success criteria for making web content accessible to people with disabilities, including visual impairments. Contrast ratio requirements are defined in Success Criterion 1.4.3 (level AA) and 1.4.6 (level AAA).

What counts as \\\"large text\\\" under WCAG?

Text that is 18 points (24px) or larger in regular weight, or 14 points (approximately 18.66px) or larger in bold weight. Large text has a lower contrast threshold because larger characters are inherently easier to read.

What is the difference between AA and AAA compliance?

AA is the baseline level that most accessibility laws and corporate policies require. AAA is stricter and recommended for critical content like government services, healthcare, and education. AAA requires a 7:1 ratio for normal text versus 4.5:1 for AA.

Does this tool account for transparency or opacity?

Not directly. If your text or background uses an alpha channel (rgba or hsla), the effective color depends on what is behind the transparent layer. Calculate the flattened color first (by compositing the semi-transparent layer over the actual background), then check that flattened color here.

What about WCAG 3.0 and the APCA algorithm?

WCAG 3.0 is in draft and proposes replacing the current luminance-based formula with the Advanced Perceptual Contrast Algorithm (APCA). APCA accounts for font size, weight, and the polarity of light-on-dark versus dark-on-light text. This tool uses the WCAG 2.1 formula, which is the current published standard and the one referenced by existing accessibility laws.

Is 4.5:1 always enough?

For WCAG AA compliance with normal text, yes. But 4.5:1 is a minimum, not a target. Higher ratios are better for readability, especially on mobile screens in bright environments. Aim for 7:1 when you have design flexibility.

WCAG Contrast Ratio Checker

This tool calculates the contrast ratio between any two colors and tells you whether the combination passes WCAG 2.1 accessibility standards at AA and AAA levels. Enter a text color and a background color in any format (hex, RGB, HSL), and the tool shows the ratio, the pass/fail status for normal text, large text, and UI components, and a live preview of how the text looks against the background. Everything runs in your browser. No data is transmitted.

How this tool works

Contrast ratio is defined by the Web Content Accessibility Guidelines (WCAG) 2.1, published by the W3C. The formula compares the relative luminance of two colors: Where L1 is the relative luminance of the lighter color and L2 is the relative luminance of the darker color. Relative luminance is calculated from the sRGB values of each color using the formula defined in WCAG 2.1 Success Criterion 1.4.3:

Worked example

Body copy at #777777 on #FFFFFF scores about 4.48:1, which is just under WCAG AA for normal text. The tool suggests a darker foreground hex such as #767676 to reach 4.5:1.

Frequently asked questions

What is WCAG 2.1?
WCAG 2.1 is the Web Content Accessibility Guidelines version 2.1, published by the World Wide Web Consortium (W3C). It defines success criteria for making web content accessible to people with disabilities, including visual impairments. Contrast ratio requirements are defined in Success Criterion 1.4.3 (level AA) and 1.4.6 (level AAA).
What counts as \\\"large text\\\" under WCAG?
Text that is 18 points (24px) or larger in regular weight, or 14 points (approximately 18.66px) or larger in bold weight. Large text has a lower contrast threshold because larger characters are inherently easier to read.
What is the difference between AA and AAA compliance?
AA is the baseline level that most accessibility laws and corporate policies require. AAA is stricter and recommended for critical content like government services, healthcare, and education. AAA requires a 7:1 ratio for normal text versus 4.5:1 for AA.
Does this tool account for transparency or opacity?
Not directly. If your text or background uses an alpha channel (rgba or hsla), the effective color depends on what is behind the transparent layer. Calculate the flattened color first (by compositing the semi-transparent layer over the actual background), then check that flattened color here.
What about WCAG 3.0 and the APCA algorithm?
WCAG 3.0 is in draft and proposes replacing the current luminance-based formula with the Advanced Perceptual Contrast Algorithm (APCA). APCA accounts for font size, weight, and the polarity of light-on-dark versus dark-on-light text. This tool uses the WCAG 2.1 formula, which is the current published standard and the one referenced by existing accessibility laws.
Is 4.5:1 always enough?
For WCAG AA compliance with normal text, yes. But 4.5:1 is a minimum, not a target. Higher ratios are better for readability, especially on mobile screens in bright environments. Aim for 7:1 when you have design flexibility.