Verify Brand Color Combinations
Test your brand color palette pairings to ensure they work for accessible UI design.
Large heading text
Medium body text (18px) for reading and content.
Normal body text (16px) for paragraphs.
Small body text (14px) for captions and metadata.
Contrast ratio
Requires 4.5:1 Β· You have 14.63:1
Requires 3.0:1 Β· You have 14.63:1
Requires 7.0:1 Β· You have 14.63:1
Requires 4.5:1 Β· You have 14.63:1
Requires 3.0:1 Β· You have 14.63:1
Quick presets
Based on WCAG 2.1 contrast guidelines. Large text = 18pt (24px) normal or 14pt (18.66px) bold. Hex codes update in both directions: type a hex or pick a color, both inputs stay in sync.
Brand Design tips
Many trendy brand colors (light tints, pastels) fail AA on white. Use the checker to find compliant combos before printing style guides.
For brand colors that need to work on both light and dark mode, test the same hex against #ffffff and #0f172a separately.
For CTAs, use the highest-contrast pairing β buttons need to read at a glance. Lower contrast is fine for less critical UI elements.
Document your AA-passing brand color combos in your design system so designers don't accidentally use failing combinations.
Sut Mae'n Gweithio
Pam defnyddio ein un ni?
Also check outβ¦
Audit Web Pages for WCAG Compliance
Verify your site's text colors meet WCAG AA or AAA
Test Dark Mode Color Palettes
Light text on dark backgrounds can still fail cont
Color Pairings for Print Materials
Posters, signs, and printed materials also need re
Design Accessible Button Colors
Make sure CTAs, action buttons, and links pass WCA