Generate accessible color palettes, test text-to-background contrast ratios, and verify WCAG AA / AAA compliance in real time.
This live card demonstrates how normal paragraph body text and larger heading elements render with your selected foreground and background colors.
Design accessible digital experiences. Test color combinations against official Web Content Accessibility Guidelines (WCAG) and generate harmonious, compliant color palettes.
Select foreground (text) and background colors using the color pickers or HEX inputs.
View calculated contrast ratios and instant WCAG AA / AAA pass or fail indicators for normal and large text.
Explore and generate complementary, analogous, or triadic color harmonies.
Copy HEX, RGB, or HSL values directly to your CSS or Tailwind config.
Real-time relative luminance calculation for precise WCAG contrast ratios
Compliance breakdown for WCAG 2.1 AA and AAA standards (Normal & Large Text)
Automated palette generator (Complementary, Analogous, Triadic, Monochromatic)
Live component preview showing readable text card rendering
One-click copy for HEX, RGB, and CSS variables
Input
Foreground: #000000 | Background: #FFFFFF
Output
Contrast Ratio: 21:1 (Passes WCAG AA & AAA)
Color Palette & WCAG Contrast Checker processes the values or files you provide according to the options shown in the tool. Review the result before relying on it for an important decision or external workflow.
Results are provided for convenience. Check the output against your own requirements before using it in an important workflow, publication or decision.
This tool is designed to perform its main calculation or transformation in your browser. Do not enter information that the tool does not need, and review the site's Privacy Policy for analytics, advertising and third-party services.
Answers about how the tool works, its limitations, and how your information is handled.
WCAG AA requires a contrast ratio of at least 4.5:1 for normal text (under 18pt or 14pt bold) and 3:1 for large text (18pt+ or 14pt+ bold).
WCAG AAA requires a contrast ratio of at least 7:1 for normal text and 4.5:1 for large text.
This tool is designed to perform its main calculation or transformation in your browser. Do not enter information that the tool does not need, and review the site's Privacy Policy for analytics, advertising and third-party services.
Continue with related UtilsDesk tools for the same type of task. Each tool has its own instructions, examples, methodology notes, and limitations.
