Contrast Ratio Checker (WCAG Compliance Check)

Enter two colors to calculate the WCAG (Web Content Accessibility Guidelines) contrast ratio and check compliance with the AA and AAA standards.

WCAG Contrast Ratio Requirements at a Glance

Level Target Required Ratio
AA (Minimum) Normal text 4.5:1 or higher
AA (Minimum) Large text (18pt+ regular, or 14pt+ bold) 3:1 or higher
AA (Minimum) UI components and graphical objects 3:1 or higher
AAA (Enhanced) Normal text 7:1 or higher
AAA (Enhanced) Large text 4.5:1 or higher

Usage Tips

  • You can set the text and background colors using the color picker, or by typing a hex code directly (both `#RRGGBB` and `#RGB` formats are supported).
  • Click "Swap Colors" to quickly reverse the foreground and background colors for comparison, which is handy when testing multiple logo or icon color schemes.
  • The AAA level is stricter than AA. Meeting AA is generally considered the minimum recommended baseline for websites, but AAA is worth aiming for on content where readability is especially important.
  • The 3:1 requirement for UI components and graphical objects, such as button borders and icons, is Success Criterion 1.4.11, added in WCAG 2.1.

Frequently Asked Questions

WCAG (Web Content Accessibility Guidelines) is an international set of guidelines for making web content accessible to more people. The contrast ratio expresses the difference in brightness between the text color and the background color as a number ranging from 1:1 (no difference) to 21:1 (the maximum difference, black on white). It is used as an objective measure of how readable text is under various conditions, such as for people with visual impairments, older users, or anyone viewing a smartphone screen in bright outdoor sunlight.

Larger characters are easier to distinguish by shape, so they remain readable even with somewhat lower contrast. WCAG defines "large text" as regular text of 18pt (about 24px) or larger, or bold text of 14pt (about 18.66px) or larger, and applies a more relaxed requirement (3:1 or higher under AA) than for normal text.

The AA level in WCAG 2.1 is the minimum standard referenced by many countries' laws and guidelines, for example the US ADA and the EU Web Accessibility Directive. AAA is a higher, stricter level that is not mandatory, but it is sometimes recommended for content where readability is especially critical, such as government websites.

WCAG 2.x first calculates the "relative luminance" of each color by removing gamma correction from its sRGB values. It then computes the contrast ratio as (L1+0.05)/(L2+0.05), where L1 is the luminance of the lighter color and L2 is the luminance of the darker color. This method is published as part of the W3C's technical specification.
ツールくん

Side Note — The Origins of Accessibility Standards

WCAG (Web Content Accessibility Guidelines) is an international guideline developed mainly by the W3C (World Wide Web Consortium). Its first version, WCAG 1.0, was published in 1999. Even then, reducing the barriers faced by visually impaired users relying on assistive technologies such as screen readers was already recognized as a major challenge.

Contrast ratio requirements gained prominence for several reasons rooted in the diversity of human vision: color vision deficiency affects a meaningful share of the population (roughly 1 in 20 men, for instance), aging causes the eye's lens to yellow and reduces contrast sensitivity, and smartphone screens become hard to see under direct outdoor sunlight. Setting numerical thresholds allowed designers to verify accessibility objectively, rather than relying solely on subjective judgments of readability.

Today, web accessibility is a legal requirement in many countries. For example, Japan's April 2024 amendment to the Act for the Elimination of Discrimination against Persons with Disabilities made providing reasonable accommodation mandatory for businesses. Checking contrast ratios has become one of the basic quality checks that businesses can no longer skip when building websites.

More tools in this category