Color Contrast Checker
Check foreground and background color pairs against WCAG 2.1 AA and AAA contrast requirements.
13.98:1
Minimum for body text (< 18pt / 14pt bold) (≥ 4.5:1)
Minimum for large text (≥ 18pt / 14pt bold) (≥ 3:1)
Enhanced contrast for body text (≥ 7:1)
Enhanced contrast for large text (≥ 4.5:1)
Text Preview
Large Text Preview (24px Bold)
Large text is defined as 18pt (24px) or larger, or 14pt (18.66px) bold or larger. This text qualifies as large text under WCAG guidelines.
Normal text preview (14px) — Most body copy on the web falls into this category. Normal text has stricter contrast requirements than large text because smaller characters are harder to distinguish at lower contrast levels.
Inverted Preview
The same color pair reversed — foreground as background and vice versa. The contrast ratio is identical regardless of which color is on top.
Related Tools
- 01·COLColor Palette Generatoraccent · #FF006E
Generate complementary, analogous, triadic, and more color harmonies from any base color. Export as CSS variables, Tailwind config, SCSS, or JSON.
- 01·COLColor Format Converteraccent · #3A86FF
Paste any color value and instantly see it in HEX, RGB, RGBA, HSL, HSLA, and HSV. Copy any format with one click.
- 02·CSSGradient Generatoraccent · #E91E63
Build linear, radial, and conic CSS gradients with multiple color stops, angle control, and real-time preview.
Runs in your browser.
Every color, gradient and CSS output is generated on this page. Nothing is uploaded, logged or shared.