WCAG color contrast checking tool. Enter foreground and background colors to calculate contrast ratio and check against WCAG 2.1 AA/AAA accessibility standards. Supports hex, RGB, HSL and color names. Fully client-side.
WCAG 2.1 · AA/AAA · Client-side| Standard | Level | Min Ratio | Description | Status |
|---|
This is a body text sample. WCAG AA requires at least 4.5:1 for normal text and 3:1 for large text (18px bold or 24px+).
Small auxiliary text example (under 18px)
The Web Content Accessibility Guidelines (WCAG) 2.1 define minimum contrast ratios to ensure that users with visual impairments (including color blindness and low vision) can read content clearly.
Always aim for AA compliance (minimum legal requirement in most regulations). Strive for AAA when possible. In dark mode designs, pay special attention to light text on dark backgrounds. Use this tool throughout your design process.
Contrast ratio is the difference in relative luminance between two colors, ranging from 1:1 (identical) to 21:1 (black on white). WCAG uses the relative luminance formula defined for the sRGB color space.
Per WCAG, large text is at least 18pt (≈24px) bold or 24pt (≈32px) regular. Large text has more relaxed contrast requirements due to its larger size.
Yes. WCAG 2.1 AA requires UI components (button borders, form controls, icons) to have at least 3:1 contrast against adjacent colors.
Supports HEX (#RRGGBB, #RGB), RGB/RGBA, HSL/HSLA formats, plus common color names (red, blue, white, black, etc.). Transparent is treated as black.
Darken the foreground or lighten the background to improve contrast. Use the color pickers to adjust — results update in real time. Dark text on light backgrounds or light text on dark backgrounds work best.