What contrast ratios does WCAG require for text?

For most text, AA requires at least 4.5:1 and AAA requires 7:1. Large text uses 3:1 for AA and 4.5:1 for AAA. Large text is at least 18 point regular or 14 point bold, commonly approximated as 24 CSS pixels or about 18.66 CSS pixels bold.

What does the UI components result represent?

It applies the 3:1 threshold commonly used for visual information needed to identify user-interface components and graphical objects. Applicability depends on state, boundaries, adjacent colors, and whether the visual is required to understand or operate the interface.

Does a passing ratio make the whole design accessible?

No. Contrast is one requirement. Font weight, size, spacing, hover and focus states, gradients, images, color-vision differences, zoom, forced colors, and conveying information without color all need separate testing.

Developer Utilities

Color Contrast Checker

Check WCAG text and UI contrast ratios with a live preview.

How the contrast ratio is calculated

Each opaque sRGB channel is converted from its encoded value to linear light, combined with the WCAG relative-luminance coefficients, and compared as (lighter + 0.05) / (darker + 0.05). The ratio ranges from 1:1 for identical luminance to 21:1 for black and white. Swapping foreground and background does not change the numeric ratio.

Loading tool...

AA, AAA, and live preview

Normal-text AA passes at 4.5:1 and AAA at 7:1.
Large-text AA passes at 3:1 and AAA at 4.5:1.
The UI sample reports the 3:1 non-text threshold without assuming that every visible border must meet it.
The suggestion chooses whichever of opaque black or white has the higher ratio against the current background; it does not preserve brand intent.
The live preview helps spot obvious readability problems but is not a substitute for testing the rendered product at its real sizes and states.

Color and rendering boundaries

The calculator accepts three- or six-digit opaque hexadecimal sRGB colors. Alpha transparency, gradients, images, blend modes, display calibration, anti-aliasing, wide-gamut colors, and text drawn over changing content require evaluating the final composited pixels. Processing is local and does not sample another webpage automatically.

Related developer tools

Continue with Color Converter, CSS Gradient, Meta Tags Generator.

How to Use Color Contrast Checker

Enter or pick an opaque foreground and background hex color.
Review the exact ratio and each normal-text, large-text, and UI threshold.
Use the live preview and optionally apply the higher-contrast black or white suggestion.
Test the complete interface at real font sizes, weights, component states, zoom levels, and color modes.

Frequently Asked Questions

What contrast ratios does WCAG require for text?: For most text, AA requires at least 4.5:1 and AAA requires 7:1. Large text uses 3:1 for AA and 4.5:1 for AAA. Large text is at least 18 point regular or 14 point bold, commonly approximated as 24 CSS pixels or about 18.66 CSS pixels bold.
What does the UI components result represent?: It applies the 3:1 threshold commonly used for visual information needed to identify user-interface components and graphical objects. Applicability depends on state, boundaries, adjacent colors, and whether the visual is required to understand or operate the interface.
Does a passing ratio make the whole design accessible?: No. Contrast is one requirement. Font weight, size, spacing, hover and focus states, gradients, images, color-vision differences, zoom, forced colors, and conveying information without color all need separate testing.

Sources & references

Primary references: W3C WCAG 2.2: Contrast (Minimum); W3C CSS Color Module Level 4.

Review policy: references and behavior notes are checked whenever the tool implementation changes.