ColorFlowTools

WCAG Contrast Checker

Test a color pair against the specific thresholds in WCAG 2.2. Enter a foreground and background color to see the contrast ratio and a detailed breakdown: AA and AAA for normal text, AA and AAA for large text, and the 3:1 minimum for graphical objects and UI components. Each result is labeled in plain text so the outcome never depends on color alone. You can set font size and weight to apply the correct large-text rules, swap colors, preview text, and get a suggested alternative when a pair fails. Alpha colors are composited over the background first, so the ratio reflects the real, rendered appearance. This is the tool to reach for when you need to confirm a design meets a specific WCAG level.

4.54
Contrast ratio
Pass

Large text sample

Normal text sample for readability check.

RequirementThresholdResult

How to use the WCAG Contrast Checker

  1. Enter foreground and background. Set the two colors you want to test.
  2. Choose text characteristics. Set size and weight so the correct large-text threshold is used.
  3. Review every level. See AA and AAA results for normal text, large text, and UI components.
  4. Adjust to comply. Swap or apply a suggested color to reach the level you need.

Examples

  • AAA body text: Black on white reaches 21:1 and passes every level, including AAA.
  • Large-text-only pass: A mid-gray on white may pass AA for large text but fail for normal text; both are shown clearly.

How it works

WCAG defines contrast as (L1 + 0.05) / (L2 + 0.05), where L1 and L2 are the relative luminances of the lighter and darker colors. The thresholds are 3:1, 4.5:1, and 7:1 depending on text size and conformance level. This checker applies those exact rules and composites any alpha over the background.

Common use cases

  • Confirming a component meets a required WCAG level
  • Documenting contrast results for an accessibility report
  • Choosing text colors that satisfy AA or AAA

Privacy

All color calculations run in your browser. Nothing you enter is sent to a server. Saved palettes and recent colors are kept only in your browser’s local storage and can be cleared at any time.

Frequently asked questions

What is new about WCAG 2.2 contrast?

The core text-contrast thresholds are the same as 2.1. This checker applies the 4.5:1, 3:1, and 7:1 rules for text and the 3:1 rule for UI components.

What is the difference between AA and AAA?

AA is the common target (4.5:1 for normal text); AAA is stricter (7:1). AAA is often reserved for critical text.

Do UI components have a contrast rule?

Yes. Graphical objects and UI components need at least 3:1 against adjacent colors, which the checker reports.

Is alpha considered?

Yes. Translucent foregrounds are composited over the background before the ratio is calculated.

Color Contrast Checker Check the contrast ratio between two colors with clear WCAG pass/fail results. Color Picker Pick a color and read its HEX, RGB, HSL, HSV, and CMYK values with alpha support. Tint and Shade Generator Generate tints and shades of a color as a scale, with WCAG text hints and export. Color Palette Generator Generate color schemes with lock, reorder, and export to CSS, JSON, SVG, and PNG. Color Format Converter Auto-detect any color input and convert it to HEX, RGB, HSL, HSV, HWB, and CMYK.