Key Features
WCAG 2.1 contrast ratio computed with the official relative-luminance formula
AA and AAA checks for both normal and large text sizes
UI Components & Graphical Objects check (the 3:1 non-text rule)
Live sample preview with real heading, paragraph, and button elements
Hex input plus native color picker, synced both ways
One-click swap between foreground and background
How to Use
1Enter or pick your foreground (text) and background colors
2Read the big contrast ratio and the five WCAG pass/fail results
3Use the live preview to judge real-world legibility
4Swap or adjust colors until your target level passes
Common Use Cases
Run an accessibility audit before shipping a new design or rebrand
Choose brand colors that stay readable in both light and dark themes
Verify dark-mode text is legible against your background color
Meet ADA, Section 508, and EN 301 549 contrast requirements
Frequently Asked Questions
What contrast ratio do I need to pass WCAG?
For normal text you need 4.5:1 to pass AA and 7:1 to pass AAA. Large text (18.66px bold or 24px+ regular) needs 3:1 for AA and 4.5:1 for AAA. UI components and graphical objects need 3:1 for AA.
What counts as large text?
WCAG defines large text as at least 18pt (24px) regular weight, or at least 14pt (18.66px) bold. Headings and display copy usually qualify, letting slightly lower-contrast colors pass.
Does this tool cover UI components too?
Yes. The fifth check applies the 3:1 non-text contrast rule to buttons, input borders, icons, and other meaningful graphics, which is required for WCAG 2.1 AA.
Free 3-Day Plus TrialFree tier available
Want AI Reminders, Gmail Sync & Calorie Tracking?
Meet Atlas AI on Telegram — your personal assistant with 3x daily briefings, photo meal tracking, and Google Calendar sync.
Related Design Tools
Color Palette Generator
Generate beautiful color palettes from any base color. Copy HEX, RGB, HSL.
CSS Gradient Generator
Design stunning linear, radial, and conic gradients with live preview. Copy CSS instantly.
Color Converter
Convert between HEX, RGB, HSL, and named CSS colors with live preview.
CSS Box Shadow Generator
Design box shadows visually with sliders, layered shadows, and presets. Live preview with instant copyable CSS.