Color Contrast Checker
Check foreground/background color combinations for WCAG 2.1 AA and AAA accessibility compliance.
Normal text
Large text (18pt / 14pt bold)
The quick brown fox jumps over the lazy dog.
Contrast ratio
17.40:1
Why Use PixConvert Contrast Checker
WCAG compliance checking in one tool — pick colors, see results instantly.
WCAG 2.1 Compliance
Checks all relevant WCAG 2.1 success criteria: AA normal, AA large, AAA normal, AAA large, and UI components.
Live Preview
See text rendered on the actual background color in normal, large, and UI component sizes.
Color Picker
Native browser color picker plus hex input for precise color selection.
Exact Ratio
Shows the exact contrast ratio to 2 decimal places (e.g. 4.53:1) for documentation.
Swap Colors
Swap foreground and background with one click to check both combinations instantly.
100% Private
Pure WCAG formula calculated in your browser. No server, no tracking.
When to Check Color Contrast
Accessibility is a legal requirement in many jurisdictions. Check early.
Design Review
Verify color choices in Figma designs meet WCAG requirements before handoff to engineering.
- Check primary button colors
- Verify text on brand backgrounds
- Test placeholder text readability
Accessibility Audit
Audit existing UI for WCAG 2.1 AA compliance as part of a legal or quality review.
- Identify failing color pairs
- Document contrast ratios
- Prioritize fixes by severity
Design System
Validate every token in your color palette for accessibility before publishing.
- Validate color token pairs
- Build accessible theme variants
- Document compliant combinations
How to Check Color Contrast
Pick your text color (foreground) and background color using the color pickers or hex inputs.
The contrast ratio and WCAG pass/fail results update instantly. Use Swap to check the inverse combination.
Review the results for AA and AAA compliance levels — all calculations follow the official WCAG 2.1 formula and run entirely in your browser.
Explore More Tools
Discover other free tools that work great alongside this one
CSS Gradient Generator
Build custom CSS gradients visually
Box Shadow Generator
Design CSS box-shadows with live preview
Color Converter
Convert HEX, RGB, and HSL color codes instantly
Color Palette Extractor
Extract dominant colors from any image
JSON Formatter
Format, validate, and minify JSON instantly
Regex Tester
Test and debug regular expressions live
Frequently Asked Questions
Color contrast and accessibility explained.
What is the WCAG contrast ratio requirement?
WCAG 2.1 Level AA requires: 4.5:1 for normal text, 3:1 for large text (18pt+ or 14pt+ bold), and 3:1 for UI components and graphical objects. Level AAA requires 7:1 for normal text and 4.5:1 for large text.
How is contrast ratio calculated?
Contrast ratio = (L1 + 0.05) / (L2 + 0.05), where L1 is the relative luminance of the lighter color and L2 is the relative luminance of the darker color. Luminance is calculated from the linearized sRGB values using the WCAG 2.1 formula.
What counts as 'large text'?
WCAG defines large text as 18pt (24px) or larger, OR 14pt (approximately 18.67px) or larger when bold. Large text gets a more lenient contrast requirement (3:1 instead of 4.5:1) because it's inherently more readable.
Do I need to meet AAA?
WCAG Level AA is the standard legal requirement in most jurisdictions (ADA in the US, EN 301 549 in EU). AAA is the enhanced target — aim for AA as the minimum, AAA where possible for critical content.
Does this work for images and gradients?
This tool checks solid color pairs. For text over images or gradients, you must evaluate the worst-case background color (the lightest point behind text for dark text, darkest point for light text). WCAG does not require image backgrounds to pass contrast — it's a best practice.