Contrast Checker

Test any foreground/background colour pair against the WCAG AA and AAA contrast rules. Colour picker, hex input, and live preview.

Jump to section

Ad · responsive

How to Use the Contrast Checker

Enter your foreground (text) color and background color using the color pickers or hex inputs. The contrast ratio and WCAG pass/fail results update instantly. The live preview below shows how actual text looks at various sizes with your color combination. If the combination fails, the Suggestions section offers the closest colors that would pass. Use the Palette Checker to test all pairs in a color scheme at once, and the Share button to send a permalink to a colleague.

About This Tool

A WCAG 2.1 color contrast checker that calculates the contrast ratio between any two colors and evaluates compliance with AA and AAA accessibility standards for normal text, large text, and UI components. Uses the official WCAG relative luminance formula implemented in pure JavaScript — zero external libraries. When a color combination fails, the tool suggests the closest passing alternative using a binary search on HSL lightness. The palette checker mode tests all pairwise combinations from a set of up to 10 colors. Related: translate between color formats for converting between HEX, RGB, HSL, and CMYK, and convert between binary, decimal, and hex for the underlying numeric conversions.

Quick Reference Table

Context	AA Minimum	AAA Minimum
Normal text (< 18pt)	4.5:1	7.0:1
Large text (≥ 18pt / 14pt bold)	3.0:1	4.5:1
UI components & graphics	3.0:1	N/A

Frequently Asked Questions

Does this tool check WCAG 2.2 or WCAG 3.0?

This tool implements WCAG 2.1 contrast requirements, which remain the current legal and practical standard. WCAG 2.2 did not change contrast requirements. WCAG 3.0 proposes a new APCA model, but it has not yet replaced WCAG 2.1 in legal or regulatory frameworks.

What is the gray on white contrast ratio at exactly WCAG AA?

The exact minimum gray value that achieves 4.5:1 against white (#FFFFFF) is #767676. Any color darker than this passes AA for normal text on white. This is a commonly referenced value in accessibility work.

Does contrast ratio apply to images or decorative elements?

WCAG contrast requirements apply to text and meaningful UI components (such as form field borders and icons that convey information). Purely decorative images and elements that have no informational purpose are exempt.

Does this matter for dark mode?

Yes — contrast requirements apply equally to dark mode. White text on a dark background must also meet the same 4.5:1 minimum for normal text. Many designs that look fine in light mode fail in dark mode when the contrast has not been independently verified.

My design uses a semi-transparent overlay — how do I check it?

Calculate the effective composite color by blending the overlay with its background first, then check contrast against the composited result. This tool processes opaque colors only — compute the blended color manually using alpha compositing, then paste the result into the checker.

Created by The Toobits Team · Engineering & Editorial

Toobits is built, tested, and maintained by a small independent engineering team. Every tool is written in TypeScript, runs entirely in the browser, and is reviewed against its source formulas before publication.

Editorial policy · Updated April 2026

Ad · responsive