Normal text
Body text below 24px, or below 18.66px when bold.
AA passesAAA passes
Color Contrast Checker
Test any foreground and background color combination against WCAG AA and AAA guidelines. Preview your text in context, verify UI borders, and fix low-contrast colors in one click.
Live preview#0f1d3a / #ffffff
Accessible by design
Readability starts with contrast.
This preview shows normal-sized body copy alongside larger, heavier text so you can judge the combination beyond a number.
Contrast ratio
16.70:1
Enter a 3 or 6 digit HEX color.
Enter a 3 or 6 digit HEX color.
WCAG 2.1 Compliance Results
Threshold requirements for web accessibility standards.
Large text
Headings & text at least 24px, or 18.66px when bold.
AA passesAAA passes
UI components
Controls, input borders, icons, and focus indicators.
AA passesAAA not defined
Try popular combinations
How Our Color Contrast Checker Works
Verify readability and fix accessibility issues in three quick steps.
Step 101
Pick Foreground & Background
Enter your text and background HEX codes or use the interactive color pickers to test your current design pairing.
Step 202
Check WCAG AA & AAA Badges
See instant pass or fail badges for regular text (4.5:1 AA / 7:1 AAA), large headings (3:1 AA), and UI controls.
Step 303
Apply Accessible Suggestions
If a pairing fails, click the suggested accessible shade to automatically adjust brightness while keeping your brand hue intact.
Key features
Designed to help teams ship readable, inclusive interfaces without guesswork.
WCAG AA & AAA Verification
Evaluates body copy, large headings, and UI component boundaries against official Web Content Accessibility Guidelines.
One-Click Contrast Fixes
Finds the closest passing shade to your original color so you can meet accessibility targets without losing your visual identity.
Browser-Local Processing
Your files are processed directly in your browser and are not uploaded to Pinatool's servers.
Frequently Asked Questions
Common questions about WCAG compliance, text sizes, and color contrast ratios.
What is a good color contrast ratio?
According to Web Content Accessibility Guidelines (WCAG) 2.1, standard body text requires a contrast ratio of at least 4.5:1 to pass Level AA, and 7:1 for enhanced Level AAA. For large text (at least 24px regular or 18.66px bold), Level AA requires 3:1 and Level AAA requires 4.5:1.
What counts as large text in WCAG?
Large text is defined as at least 18pt (24 CSS pixels) for normal font weights, or at least 14pt (approximately 18.66 CSS pixels) for bold text. Because larger and heavier text is easier to read, it requires a lower minimum contrast ratio (3:1 for AA).
Are graphical objects and UI components subject to contrast rules?
Yes. Under WCAG 2.1 Success Criterion 1.4.11 (Non-text Contrast), user interface components (such as form field borders, button outlines, and active icons) and graphical objects must achieve at least a 3:1 contrast ratio against adjacent colors.
How do the accessible suggestions work?
If your chosen foreground color fails the AA (4.5:1) or AAA (7:1) threshold, Pinatool calculates the minimal perceptual step toward black or white required to hit the exact passing threshold. You can apply the suggested color in one click without guessing hex values.
Does this contrast checker upload my brand colors?
No. All calculations, luminance ratios, live previews, and color adjustments happen entirely client-side in your web browser. No color data or design information is ever sent to a server.
Explore More Tools
More free utilities for accessible color systems and palette extraction.