Skip to content
Got A Tool

Color Contrast Checker

Calculate the WCAG contrast ratio between two hexadecimal colors and check text-size thresholds.

Runs in your browserFree · No account required

Check text and background contrast

Enter two opaque hexadecimal sRGB colors to calculate their WCAG contrast ratio. The results show AA and AAA thresholds for normal and large text. This is a contrast calculation, not a complete accessibility audit.

1

Enter your details

Change the values, then run the tool.

Try a common pair

Contrast ratio

14.63:1

Sample text preview
  • AA · normal text (4.5:1): Pass
  • AA · large text (3:1): Pass
  • AAA · normal text (7:1): Pass
  • AAA · large text (4.5:1): Pass

WCAG contrast thresholds do not alone establish conformance. Text size, weight, non-text controls, focus, and other accessibility requirements need separate review.

Data handling

Processing
The selected input is processed in your browser. Got A Tool does not send it to our servers.
Retention
We do not retain selected files. Resetting or closing this page clears its working state.
Export
The tool may prepare a result after you run it. It downloads or copies it only when you choose that action.

Advertising and analytics are separate site services. We do not send selected file contents to them. Read the Privacy Policy for details.

How it works

Color Contrast Checker: a practical guide

Text contrast affects how easily people can read foreground text against a background. This checker calculates the contrast ratio for two opaque hexadecimal sRGB colors and compares it with common WCAG 2.2 text thresholds: 4.5:1 for normal text and 3:1 for large text at AA, with stricter AAA thresholds.

  1. STEP 01

    Choose or enter a foreground hexadecimal color.

  2. STEP 02

    Choose or enter a background hexadecimal color.

  3. STEP 03

    Review the ratio and the separate AA and AAA results for normal and large text.

What this tool does and its limits

The calculation follows the WCAG relative-luminance method for sRGB colors. Large text generally means at least 18 point regular or 14 point bold. A passing ratio alone does not make a page accessible: text size, non-text controls, focus visibility, color use, and other requirements still need review. Transparent colors are not supported because the final background would be ambiguous.

Processing happens in your browser. The selected file or entered values are not uploaded to Got A Tool or saved by this tool.

Frequently asked questions

What does a contrast ratio such as 4.5:1 mean?
It compares the relative luminance of the lighter and darker colors. Higher ratios generally improve readability.
What counts as large text?
WCAG defines large text as at least 18 point regular or 14 point bold, approximately 24 px or 18.67 px respectively.
Does a passing result mean the page is accessible?
No. This checks only the selected color pair against text contrast thresholds; it does not audit the page or every accessibility criterion.
Can I check transparent colors?
This version accepts opaque 3- or 6-digit hexadecimal colors only.

Keep working

Related tools

Schema Markup Generator

Generate safe JSON-LD for organizations, local businesses, articles, products, events, and people.

Open tool →

HTML Entity Encoder & Decoder

Encode HTML-sensitive characters or decode named and numeric character references locally as plain text.

Open tool →

Image Metadata Viewer & Remover

Inspect and remove privacy metadata from static JPG, PNG, and WebP images without recompressing pixels.

Open tool →