TXT · Text & Data tools

WCAG Contrast Checker

Text Color#ffffff

white

Background Color#3f74ca

royalblue

Ratio
4.60

Design for Everyone

Web accessibility means that websites, tools, and technologies are designed so that all people can use them seamlessly.

Small Text Preview: A minimum contrast ratio of 4.5:1 is required to ensure this is readable by most users.

Contrast Errors Detected

Adjust the text or background to reach the recommended AAA standard.

WCAG 2.1 ResultsTarget / Status
AA

Normal text

Body copy under 18pt, or 14pt bold.

≥ 4.5:1Pass
AA

Large text

Text 18pt+, or 14pt+ bold.

≥ 3.0:1Pass
AAA

Normal text

Enhanced standard for body copy.

≥ 7.0:1Fail
AAA

Large text

Enhanced standard for large text.

≥ 4.5:1Pass
UI

UI & graphics

Icons, borders, inputs, focus rings.

≥ 3.0:1Pass
4.60:1Contrast4/5Checks PassedAAHighest Level

Checking contrast ratios

Input a Text Color and a Background Color using HEX codes or the color picker. The checker calculates the exact contrast ratio between the two colors, up to a maximum of 21:1 for pure black against pure white.

You can use the swap button between the inputs to quickly test the reverse pairing. The mathematical ratio remains identical regardless of which color is used as the foreground or background.

Visual preview and levels

The central preview area applies your selected colors to standard text elements, headings, and buttons so you can evaluate legibility in a real layout. The exact contrast ratio is displayed in the top right corner of the preview.

Below the preview, the results table checks your ratio against five distinct WCAG 2.1 requirements. It verifies AA and AAA levels for both normal text and large text (18pt+), along with the standard for UI elements and graphics like borders and icons.

Auto-fixing failing colors

If your chosen pairing fails any of the required contrast checks, the status bar will provide options to resolve the errors. You can choose to either Fix Background or Fix Text.

These actions will automatically adjust the lightness of the targeted color to meet the strictest possible WCAG threshold while preserving your original hue. If reaching the AAA standard is mathematically impossible for that specific hue, the tool will optimize the color for AA compliance and prompt you to adjust the other color.

Frequently Asked Questions

AA needs 4.5:1 for normal text and 3:1 for large text. AAA needs 7:1 for normal text and 4.5:1 for large text. Large text is roughly 18pt, or 14pt bold.

From the relative luminance of the two colors, as a value between 1:1 (identical) and 21:1 (black on white). It does not depend on which color is text and which is background.

It nudges the lightness of the text or background color until the pair reaches the target ratio, keeping the hue close to your original choice.

Some hue pairs cannot reach 7:1 no matter how their lightness changes. The checker then optimizes for AA and tells you which color to change to clear the rest.

No. Contrast is one requirement. Font size, focus states, and not relying on color alone to convey meaning also matter.

Explore Our Tools

Browse all tools