MIGHTYPAINT COLOR TOOL
WCAG Contrast Checker & Color Fixer
Test foreground and background colors against WCAG contrast standards, preview them instantly, and fix low-contrast pairs for better readability.
Color Setup & Preview
Invalid HEX
Invalid HEX
Copied!
Preview uses your selected text and background colors.
Sample Article Title
The quick brown fox jumps over the lazy dog. This is how your body text will look with the selected colors.
Good contrast makes reading effortless. Poor contrast strains the eyes and excludes users with low vision.
Large Heading Preview
This is how headings appear with your chosen colors
Headings need strong contrast to guide readers through your content hierarchy and establish visual structure.
What is Color Contrast?
Color contrast is the difference in perceived luminance between two colors. It determines how easily text can be read against its background.
Why it matters
- Easier reading for all users
- Better accessibility compliance
- More reliable UI decisions
(L1 + 0.05) / (L2 + 0.05)
L1 = relative luminance of the lighter color. L2 = relative luminance of the darker color.
Quick Guide
Pick colors
Choose a foreground and background color using the pickers or enter HEX codes.
Read the score
Check your contrast ratio and WCAG pass or fail status instantly.
Fix contrast
Use the fix buttons or sliders until all needed levels pass.
WCAG Contrast Requirements
| Standard | Normal Text | Large Text |
|---|---|---|
| WCAG AA | 4.5:1 | 3:1 |
| WCAG AAA | 7:1 | 4.5:1 |
Use AA as your everyday baseline. Use AAA for critical text or maximum readability.
Read the Result
Contrast Ratio
A single number showing the difference in brightness. Higher is better.
AA vs AAA
AA is the standard minimum. AAA is the highest accessibility level.
Normal vs Large
Large text (24px+) needs less contrast than normal body text.
Preview Modes
Switch between body, heading, and button views to test real contexts.
Fix the Colors
Fix Text
Automatically darken or lighten the text color to reach AA.
Fix Background
Automatically adjust the background to improve the ratio.
Use Sliders
Manually fine-tune lightness for precise brand control.
Test States
Check hover, focus, and disabled colors separately.
Accessible Color Best Practices
Start with AA
Treat 4.5:1 as your everyday baseline for normal text.
Don’t rely on color alone
Add labels, icons, or patterns alongside color cues.
Check hover and focus states
Interactive states must also meet contrast requirements.
Test buttons and links
CTAs are often the most important elements to keep readable.
Be careful with pale palettes
Light gray on white is the most common contrast failure.
Recheck after brand changes
A new brand color can break existing accessible combinations.
Keep Creating Accessible Color Combinations
Great design is inclusive design. Use this checker with MightyPaint’s color tools to build palettes that look good and read clearly.
Explore More Color ToolsFrequently Asked Questions
?What is a good contrast ratio?
For normal text, aim for at least 4.5:1 (AA). For the highest accessibility, aim for 7:1 (AAA).
?What counts as large text?
18pt (24px) or larger, or 14pt (18.66px) or larger if the text is bold.
?Why does contrast matter?
Higher contrast improves readability and makes your content accessible to more people.
?Can I rely only on color?
No. Always combine color with other visual cues like icons, labels, or text.
?Is this tool accurate?
Yes. We use the WCAG formula for relative luminance and contrast ratio.