Tools
Contrast Checker
Test foreground and background color pairs against WCAG 2.1 AA and AAA accessibility standards. See a live preview of your text on the background color along with pass/fail grades.
Color Pairs
Large Text Sample (18pt+)
Normal text sample — this is how your body text will appear against this background color combination.
Small text sample at 14px size
3.74:1
Contrast Ratio
Normal Text
< 18pt / 14pt bold
Large Text
≥ 18pt or ≥ 14pt bold
UI Components
Buttons, icons, borders
WCAG 2.1 Guidelines
AA requires 4.5:1 for normal text, 3:1 for large text. AAA requires 7:1 for normal text, 4.5:1 for large text. UI components require 3:1.
WCAG contrast requirements at a glance
- Normal text (AA): 4.5:1 minimum
- Large text (AA): 3:1 minimum
- Normal text (AAA): 7:1 minimum
- Large text (AAA): 4.5:1 minimum
- UI components (AA): 3:1 minimum
Why accessibility matters
Approximately 8% of men and 0.5% of women have some form of color vision deficiency. Poor contrast affects all users in bright sunlight, on low-quality screens, or as they age. Meeting WCAG standards is also a legal requirement in many jurisdictions under ADA, EN 301 549, and similar laws.
Related tools
- HEX to RGBConvert HEX color codes to RGB, RGBA, and HSL values with channel breakdown.
- RGB to HEXConvert RGB values to HEX color codes with sliders and alpha transparency support.
- Gradient GeneratorCreate CSS linear and radial gradients visually with presets and CSS export.
- Color PickerPick any color and instantly get HEX, RGB, HSL, and CSS variable values.
- Image CompressorCompress JPG, PNG, and WebP images while preserving visual quality — browser-side.
- Image ResizerResize images to exact pixel dimensions or by percentage with aspect ratio lock.