YUCTS Tools

Color Contrast Checker (WCAG 2.2 AA and AAA)

Enter text and background HEX colors to get the WCAG 2.2 contrast ratio and see whether normal text, large text and UI components meet AA and AAA.

  • Runs in your browser (no upload)

#RGB or #RRGGBB (e.g. #6B7280)

#RGB or #RRGGBB (e.g. #6B7280)

Result

Contrast ratio 4.83:1

Contrast ratio
4.83:1

Comparison with WCAG 2.2

  • Content: Normal textResult: Pass

    Requirement: AA: at least 4.5:1 (SC 1.4.3)

  • Content: Normal textResult: Fail

    Requirement: AAA: at least 7:1 (SC 1.4.6)

  • Content: Large textResult: Pass

    Requirement: AA: at least 3:1 (SC 1.4.3)

    24px (18pt) or larger, or bold at about 18.66px (14pt) or larger

  • Content: Large textResult: Pass

    Requirement: AAA: at least 4.5:1 (SC 1.4.6)

    24px (18pt) or larger, or bold at about 18.66px (14pt) or larger

  • Content: UI components and graphicsResult: Pass

    Requirement: AA: at least 3:1 (SC 1.4.11)

    Button borders, icons, charts and other non-text content

Pass/fail uses the unrounded value; the ratio shown is truncated to 2 decimals (e.g. 4.499:1 is shown as 4.49:1 and does not meet 4.5:1).

Preview

This is normal 16px text. Check how easy it is to read.

Large 24px text

Bold text at about 18.66px

Button-style border and icon

Relative luminance

Text color #6B7280
0.1672
Background color #FFFFFF
1.0000

How to use

  1. Enter the text and background colors as #RRGGBB or #RGB, or choose them with the color pickers.
  2. The contrast ratio and the AA / AAA results for normal text, large text and UI components appear instantly.
  3. Check the preview and press "Copy" to share the results if needed.

FAQ

What is the difference between AA and AAA?

They are WCAG 2.2 conformance levels. Normal text needs at least 4.5:1 for AA and 7:1 for AAA; large text needs at least 3:1 for AA and 4.5:1 for AAA.

How big is "large text"?

WCAG defines large text as at least 18 point, or at least 14 point bold. In CSS 1pt is about 1.333px, so that is roughly 24px, or about 18.66px in bold.

It shows 4.49:1. Wouldn’t that round to 4.5?

Understanding SC 1.4.3 says the computed value must not be rounded: 4.499:1 does not meet 4.5:1. This tool decides with the unrounded value and truncates the displayed ratio so a failing color pair never looks like a pass.

Can it check transparent colors or gradients?

No. It compares two solid, opaque colors. For a transparent color, check the opaque color that actually appears on screen.

Notes & limitations

  • What you enter is processed only on this page and is not sent to YUCTS servers.
  • Uses the WCAG 2.x (2.2) contrast formula. Other methods such as APCA give different results.
  • Background images, gradients, transparency, text shadows, font weight and typeface differences are not taken into account.
  • Automatic results are a guide. Logos and decorative content may be exempt, so review the whole page before deciding.

Data sources