๐Ÿ› ๏ธUtility Hub
๐Ÿ’ฌFeedback
๐Ÿ  Home

๐ŸŽฏ Color Palette & Readability Checker

Calculate WCAG 2.1 contrast ratio between two colors and find accessible combinations โ€” no design experience needed.

Pick Colors

WCAG 2.1 Score

17.74: 1
3:1
4.5:1
7:1
Normal Text (16px)โœ“ AAA
Large Text (18px+)โœ“ AAA
WCAG 2.1 ๊ธฐ์ค€
AA ์ผ๋ฐ˜ ํ…์ŠคํŠธ: 4.5:1 ์ด์ƒ ย |ย  AA ํฐ ํ…์ŠคํŠธ(18px+): 3:1 ์ด์ƒ
AAA ์ผ๋ฐ˜ ํ…์ŠคํŠธ: 7:1 ์ด์ƒ ย |ย  AAA ํฐ ํ…์ŠคํŠธ: 4.5:1 ์ด์ƒ

Live Preview

Heading (24px)

The quick brown fox jumps over the lazy dog.

Body (16px)

The quick brown fox jumps over the lazy dog.

Small (12px)

The quick brown fox jumps over the lazy dog.

Button (14px)

The quick brown fox jumps over the lazy dog.

Heading (24px)โœ“ AAA
Body (16px)โœ“ AAA
Small (12px)โœ“ AAA
Button (14px)โœ“ AAA

Trending Palettes

Click any palette to apply instantly

์ด ๋„๊ตฌ๋ฅผ ์นœ๊ตฌ์—๊ฒŒ ๊ณต์œ ํ•˜๊ธฐ

Related Tools

๐ŸŽจLogo & Favicon Generator
๐Ÿ”คMultilingual Font Comparer
๐Ÿ’ฌUser Feedback Collector
๊ด‘๊ณ  ์˜์—ญ

What is a Color Palette & WCAG Readability Checker?

This Color Contrast Checker calculates the luminance contrast ratio between two colors according to WCAG 2.1 (Web Content Accessibility Guidelines) and determines whether the combination passes AA or AAA standards for both normal and large text. It helps designers, developers, and PMs verify that text is readable for all users โ€” including those with visual impairments, color blindness, or age-related vision changes. Apply trending palettes with a single click and verify accessibility instantly.

Common Use Cases

๐ŸŽจ
UI/UX Design Systems
Verify that button colors, form labels, and notification messages meet WCAG contrast requirements before shipping.
โ™ฟ
Web Accessibility Compliance
Pre-validate color contrast for government, financial, and educational sites where accessibility compliance is legally required.
๐Ÿ“Š
Presentations & Infographics
Ensure dashboard charts and slide decks remain legible on projectors and in print by checking contrast ratios in advance.
๐ŸŽฏ
Marketing & Brand Design
Confirm text legibility in brand-colored banners, email newsletters, and social media posts.

How to Use

  1. 1
    Pick background & text colors
    Use the color pickers or enter HEX codes directly. Use the โ†” button to swap colors instantly.
  2. 2
    Check WCAG scores
    Pass/Fail badges for Normal Text AA/AAA and Large Text AA/AAA appear immediately.
  3. 3
    Apply trending palettes
    Click any palette card below to apply that color combination instantly and compare options quickly.
  4. 4
    Share results & apply to design
    Screenshot the pass/fail badges to share with your team, or record the verified color combinations in your design system documentation for use as brand guidelines.

Frequently Asked Questions