Does a 4.5:1 result mean the UI is accessible?

No. It means that one pair meets the WCAG 2 contrast threshold for normal text at level AA. Size, weight, non-text contrast, focus, and viewing conditions still matter.

Which formula is used?

WCAG 2.x relative luminance on sRGB, then (L1 + 0.05) / (L2 + 0.05). This is not APCA or WCAG 3.

How is large text treated?

Large-text AA is 3:1 and large-text AAA is 4.5:1. UI-component contrast uses the 3:1 non-text threshold.

Contrast

Contrast Checker

Enter two colors and get the WCAG 2.2 sRGB contrast ratio plus independent AA/AAA results. The tool also suggests black or white text on the background.

Input is processed in your browser. ColorToolMage does not upload it, store it, or send it to analytics.

Foreground / text

Background

Preview text

The quick brown fox jumps over the lazy dog.

Result

18.88:1

WCAG 2.2 relative luminance / contrast ratio on opaque sRGB

The ratio is shown to two decimals. Pass and fail use the unrounded ratio, so a displayed 7.00 can still fail AAA. Large text means WCAG 2.2 success criterion 1.4.3: 18pt (24px) or larger, or 14pt bold. Normal text uses 4.5:1 for AA and 7:1 for AAA. The UI row is criterion 1.4.11 at 3:1. One passing row is not a claim that the page is accessible.

PassAA normal4.5:1
PassAA large3:1
PassAAA normal7:1
PassAAA large4.5:1
PassUI (3:1)3:1

A numeric pass is not an accessibility compliance claim. WCAG also covers size, weight, non-text contrast, focus, and real viewing conditions. This tool does not evaluate APCA, WCAG 3, or color-vision deficiency.

Suggested text on this background: #000000 (21:1)

How it works

Each color is treated as opaque sRGB. Relative luminance uses the WCAG 2 gamma linearization. Thresholds are reported independently so one pass cannot be read as full compliance.

Input and output

Input is two colors as hex, a CSS color name, or rgb()/rgba() with channels from 0 to 255. Output is a ratio to two decimals, threshold badges, a preview, and a suggested text color.

Common uses

Black on white

#000000 on #FFFFFF is 21:1 and passes every listed threshold.

Gray on white

#777777 on #FFFFFF is 4.48:1. It fails AA normal and passes AA large.

How to use this tool

Enter a foreground (text) color and a background color.
Read the ratio and the AA/AAA badges.
Use the suggested text color if you only need a readable pairing on that background.

Limitations

Opaque sRGB only. Semi-transparent text is not evaluated as a blended pair unless you convert it first.
Not a full WCAG audit.
Does not simulate color-vision deficiency.

Questions

Does a 4.5:1 result mean the UI is accessible?: No. It means that one pair meets the WCAG 2 contrast threshold for normal text at level AA. Size, weight, non-text contrast, focus, and viewing conditions still matter.
Which formula is used?: WCAG 2.x relative luminance on sRGB, then (L1 + 0.05) / (L2 + 0.05). This is not APCA or WCAG 3.
How is large text treated?: Large-text AA is 3:1 and large-text AAA is 4.5:1. UI-component contrast uses the 3:1 non-text threshold.

UK English version