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

What Is Contrast Ratio?

Contrast ratio expresses the brightness difference between a text color and a background color as a number ranging from 1:1 (no difference) to 21:1 (the maximum possible difference, black against white). The higher the number, the easier the text is to read. WCAG (Web Content Accessibility Guidelines) defines two compliance levels, AA and AAA, based on this number. This tool takes two color codes and automatically calculates the ratio, letting you see at a glance whether it clears each of five distinct requirements.

The calculation is built on a value called "relative luminance." Rather than a simple brightness figure such as the L value in HSL, relative luminance is derived by first removing sRGB gamma correction, then weighting and summing the red, green, and blue channels according to how sensitive the human eye is to each — producing a number that better matches how bright a color actually looks. Similar colors tend to produce a low contrast ratio almost by definition, so a "Fail" result does not mean the colors themselves are wrong; it simply means the brightness gap between them needs to be widened.

How to Use the Contrast Ratio Checker

  1. Enter the text color Pick a color with the color picker, or type a hex code directly. The default is a dark gray (#333333).
  2. Enter the background color Set this the same way, via the color picker or a hex code. The default is white (#ffffff).
  3. Check the result As you type, the contrast ratio and Pass/Fail badges for each AA and AAA requirement update in real time.
  4. Swap colors if needed Use the "Swap Colors" button to reverse the text and background colors, letting you compare a color scheme in its inverted form as well.

Tips for getting more out of it

  • 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.

Where This Tool Gets Used

Checking button and link colors

Enter the text and background colors of a site's primary call-to-action buttons or text links to confirm they meet the AA requirement (4.5:1 or higher).

Verifying logos and banners against their background

Confirm in advance whether a logo color or the headline text on a promotional banner stays clearly legible against the background it will be placed on.

Auditing a design system's color palette

Work through an existing set of brand and text color pairings one at a time to check whether the whole UI meets accessibility requirements, and keep a record of the results.

Validating a dark mode color scheme

Useful for checking, pairing by pairing, whether colors inverted for dark mode still clear the same contrast requirements as the light mode scheme.

Glossary

Relative luminance
A brightness measure calculated by removing sRGB gamma correction and then weighting and summing the red, green, and blue channels according to human eye sensitivity. It is the foundation of the contrast ratio calculation.
Contrast ratio
A number from 1:1 to 21:1 derived from the relative luminance of a lighter and a darker color. The higher the value, the greater the brightness gap between the two colors, and the more readable the text.
WCAG
Short for Web Content Accessibility Guidelines, the international standard for web accessibility maintained by the W3C. Contrast ratio pass criteria are defined within it.
AA level
The second-highest WCAG conformance level. Normal text must reach a contrast ratio of 4.5:1 or higher. It is widely treated as the minimum baseline referenced by many laws and guidelines.
AAA level
The highest WCAG conformance level. Normal text must reach a contrast ratio of 7:1 or higher. It is not mandatory but is recommended when readability is especially critical.
Large text
A category WCAG defines as regular text of 18pt (about 24px) or larger, or bold text of 14pt (about 18.66px) or larger. A more relaxed requirement applies than for normal text.
UI component
Visual elements that indicate something is interactive, such as button borders, input field outlines, or icons. WCAG 2.1 added a new 3:1-or-higher requirement specifically for these.

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.
Tool-kun

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.

Read related trivia

Browse all trivia

People who viewed this tool also viewed

RGB to Hex Color Code Converter (and Hex to RGB) — Free, No Sign-Up

Enter an RGB value or a hex color code to convert it instantly the other way. Works both RGB-to-hex and hex-to-RGB, so you get a code ready to paste into CSS or your design tool right away — free, no sign-up required.

Color Model Converter (RGB, HSL, HSV, CMYK)

Enter a HEX color code or pick one with the color picker to instantly convert it into RGB, HSL, HSV (HSB), and CMYK values, all shown side by side.

Color Blindness Simulator

Free tool that simulates how a color appears to people with protanopia, deuteranopia, or tritanopia (color vision deficiency).

Color Palette Reference — Copy Standard Web & Material Design Colors

A reference collection of go-to design palettes — standard web colors, the Material Design color system, and a grayscale ramp — each with a HEX code and a one-click copy button.

Extract Colors from an Image (Dominant Color Extractor)

Upload an image to automatically extract its dominant colors — the representative colors used in a photo or illustration. All processing happens entirely in your browser; the image is never sent to a server.

RGBA to RGB Converter (Flatten onto a Background)

Enter a semi-transparent foreground color (RGBA) and a background color to calculate the flattened, opaque RGB color produced by alpha blending the two, for use as a fallback where rgba() is not supported.