Contrast Ratio
Click to copy
The quick brown fox jumps over the lazy dog. This is a sample paragraph to demonstrate how text appears with the selected color combination.
This is large text. WCAG considers text to be "large" if it is at least 18pt (24px) or 14pt (18.66px) and bold.
Minimum contrast for body text (14pt and below)
Minimum contrast for large text (18pt+ or 14pt+ bold)
Enhanced contrast for body text
Enhanced contrast for large text
Showing 8 of 94 related tools
Get up and running in 30 seconds
Input text color and background color as hex codes, RGB values, or HSL. Use color pickers for visual selection or paste existing brand colors.
See calculated contrast ratio (1:1 to 21:1 scale) instantly. Higher ratios mean better readability and accessibility for users with visual impairments.
Verify if your color combination passes WCAG AA (4.5:1 for normal text) or AAA (7:1 for normal text) standards. See pass/fail indicators for each level.
If colors fail, adjust lightness or darkness using sliders until contrast ratio meets requirements. Real-time feedback shows when compliance is achieved.
Understanding WCAG contrast requirements
A color contrast checker calculates the contrast ratio between text color and background color according to WCAG (Web Content Accessibility Guidelines) standards. Contrast ratio determines readability for users with visual impairments including low vision, color blindness, or age-related vision decline. Ratios range from 1:1 (no contrast) to 21:1 (black on white maximum contrast).
WCAG defines minimum contrast ratios for accessibility compliance. Level AA requires 4.5:1 for normal text and 3:1 for large text (18pt+ or 14pt+ bold). Level AAA requires 7:1 for normal text and 4.5:1 for large text. Meeting these standards ensures content is readable by the widest possible audience including users with disabilities.
Legal compliance requirements mandate accessible interfaces. ADA (Americans with Disabilities Act), Section 508, and EU accessibility directives require WCAG compliance. Lawsuits target companies with inaccessible websites. Contrast checking prevents legal liability.
User experience suffers with poor contrast. Light gray text on white backgrounds is unreadable in bright sunlight. Low contrast causes eye strain, reduces comprehension, and drives users away. Adequate contrast benefits all users, not just those with disabilities.
Brand colors may fail accessibility standards. Marketing selects colors for aesthetics, not accessibility. Designers must validate brand palette combinations meet contrast requirements or find alternative shades.
Automated accessibility audits (Lighthouse, axe) flag contrast violations. Manual testing during design prevents failed audits in production. Proactive contrast checking saves remediation time and cost.
Dark mode implementations require separate contrast validation. Colors passing in light mode may fail in dark mode. Both themes need contrast verification for complete accessibility coverage.
WCAG Level AA (Minimum): 4.5:1 for normal text (under 18pt regular or 14pt bold). 3:1 for large text (18pt+ regular or 14pt+ bold). 3:1 for UI components and graphical objects. Widely adopted as baseline standard.
WCAG Level AAA (Enhanced): 7:1 for normal text. 4.5:1 for large text. More stringent, recommended for maximum accessibility. Harder to achieve with brand colors but provides best readability.
Non-Text Contrast: UI components (buttons, form controls, icons) require 3:1 contrast against adjacent colors. Ensures interactive elements are perceivable.
Large Text Definition: 18pt (24px) or larger regular weight, OR 14pt (18.66px) or larger bold weight. Larger text is more readable at lower contrast ratios.
Exceptions: Logos, incidental text (decorative), inactive UI components, and text within images are exempt. Active content must meet standards.
Contrast ratio formula compares relative luminance of foreground and background colors. Formula: (L1 + 0.05) / (L2 + 0.05) where L1 is lighter color luminance, L2 is darker.
Luminance calculation converts RGB to relative brightness. Accounts for human perception sensitivity to different wavelengths. Green appears brighter than red or blue at equal intensity.
Example calculations:
Light gray text on white backgrounds: Trendy minimalist designs use #999, #AAA, or lighter gray. These typically achieve only 2.5:1 to 3.5:1 contrast - below AA standards for normal text.
White text on light brand colors: Pastel backgrounds (#FFD700, #87CEEB, #FFB6C1) rarely provide sufficient contrast with white text. Darkening brand colors or using dark text necessary.
Low contrast buttons: Secondary buttons with subtle gray backgrounds (#F5F5F5) and gray text (#666) often fail contrast requirements. Disabled state styling should still meet 3:1 for perceivability.
Placeholder text: Light gray placeholders in form inputs often have 2:1 or worse contrast. WCAG requires 4.5:1 for placeholder text since it conveys information.
Link colors: Blue links (#007BFF) on black backgrounds may fail contrast. Red links (#DC3545) often fail. Ensure link colors have sufficient contrast against their background.
Dark mode issues: Colors passing in light mode may fail in dark mode. Blue (#0066CC) works on white but fails on dark backgrounds. Validate both themes.
Darken or lighten colors: Adjust color luminance while preserving hue and saturation. HSL color model makes this easier - adjust L value.
Use contrast-safe color palettes: Tools like Coolors, Adobe Color provide accessible color schemes. Material Design and Tailwind CSS palettes indicate WCAG compliance.
Add text outlines or shadows: For text over images or complex backgrounds, add dark outline or shadow to ensure readability. Not ideal but functional fallback.
Increase text weight: Bolder text is more readable at lower contrast. Convert 400 weight to 600/700 if color adjustment isn't possible.
Alternative color schemes: If brand colors can't meet contrast requirements, create alternate accessible theme. Provide color scheme toggle in settings.
Use overlays on images: For text over background images, add semi-transparent dark overlay to ensure consistent contrast.
Browser DevTools: Chrome, Firefox DevTools include contrast checkers. Inspect element, view contrast ratio in color picker.
Automated Testing: Lighthouse, axe DevTools, WAVE scan pages for contrast violations. Integrate in CI/CD for continuous compliance.
Manual Testing: Use standalone contrast checkers during design phase. Validate all text/background combinations before implementation.
Real Device Testing: Test on actual devices in different lighting conditions. Sunlight readability test ensures outdoor usability.
Document accessible color pairings in design system. Create color matrix showing which foreground/background combinations pass WCAG.
Define semantic color tokens with built-in contrast compliance. Example: text-primary always has 7:1 contrast on surface-primary.
Provide accessible color utilities in component libraries. Ensure default component styles meet contrast requirements out-of-box.
Test color palette against all backgrounds. A color safe on white may fail on light gray. Validate comprehensive combinations.
How developers ensure accessibility
Verify text/background color combinations meet WCAG AA or AAA standards. Essential for accessible web applications, ensuring readability for users with low vision or color blindness.
Validate brand colors meet WCAG standards. Test primary, secondary, and accent colors against light and dark backgrounds. Identify compliant combinations for marketing and product use.
Test color combinations for dark theme compliance. Colors passing in light mode often fail in dark mode. Validate both themes separately for comprehensive accessibility coverage.
Ensure interactive UI components (buttons, form controls, icons) meet 3:1 non-text contrast requirement. Validate component states including hover, focus, and disabled for accessibility.
Master WCAG contrast validation
This contrast checker calculates WCAG contrast ratios between foreground and background colors. Input colors, view compliance results, and adjust for accessibility requirements.
Input colors as hex codes (#FFFFFF), RGB values (rgb(255,255,255)), or HSL (hsl(0,0%,100%)). Use color pickers for visual selection or paste existing brand colors.
Click foreground color picker to select text/icon color. Click background color picker to select surface color. Preview updates in real-time showing how combination appears.
Paste hex codes directly into input fields. Remove # symbol optional - tool accepts both #FFFFFF and FFFFFF.
Ratios range from 1:1 (no contrast - identical colors) to 21:1 (maximum contrast - black on white or white on black).
Higher ratios mean better readability. 4.5:1 is minimum for normal text. 7:1 provides excellent readability for all users including those with low vision.
Ratio calculation based on relative luminance - perceptual brightness accounting for human vision sensitivity to different wavelengths.
Tool shows pass/fail indicators for WCAG levels:
Level AA (Minimum Standard):
Level AAA (Enhanced Standard):
Green checkmark indicates pass, red X indicates fail for each level and text size.
If combination fails, adjust colors using sliders or input new values:
To increase contrast: Darken foreground or lighten background (or reverse). Adjust luminance while preserving hue.
HSL adjustments: Use HSL color model to adjust lightness (L value) while keeping hue and saturation constant.
Preserve brand colors: If brand color can't be adjusted, use it for large text, icons, or decorative elements only. Use accessible alternative for body text.
Test both themes: Validate colors work in both light and dark modes. A color passing on white may fail on dark backgrounds.
Real-time feedback shows when adjustment achieves target ratio. Continue adjusting until pass indicators appear.
Reverse colors: Swap foreground and background to test inverse combination. Useful for buttons, badges, or inversed themes.
Suggest fixes: Some tools suggest nearest WCAG-compliant colors. Automatically darken or lighten to meet requirements while preserving hue.
Simulate vision deficiencies: Preview how color combination appears to users with colorblindness or low vision.
Batch testing: Test multiple color combinations from palette simultaneously. Validate entire design system.
Export validated colors to Figma, Sketch, Adobe XD. Share WCAG-compliant palettes with design team.
Generate CSS custom properties with validated colors. Document contrast ratios in design system.
Create color matrix showing all safe foreground/background pairings. Reference during design and development.
For light backgrounds (#FFFFFF):
For dark backgrounds (#1A1A1A):
Meeting WCAG is minimum - real-world testing matters. Test on actual devices in various lighting conditions.
Bright sunlight reduces perceived contrast. Colors passing indoors may fail outside. Add extra contrast margin for mobile interfaces.
Age-related vision decline affects many users over 40. Higher contrast benefits all users, not just those with measured disabilities.
Everything you need to know
Your color data never leaves your browser
Your color values never leave your browser. This contrast checker operates entirely client-side using JavaScript implementations of WCAG relative luminance and contrast ratio formulas. There are no color uploads, no backend processing, and no data transmission.
This makes the tool safe for testing proprietary brand colors, confidential design systems, or unreleased product interfaces. Use with confidence for commercial projects and sensitive design work.
Performance metrics