Worked palette example
Test each foreground/background pair independently; orange alone is not an accessibility guarantee.
Colors here are examples, not an automatic accessibility certificate. Test every foreground/background pair before using these values for text.
Open this example in the eight-role Theme Studio →Start by defining the exact pair
Contrast depends on two colors in combination. For normal text, WCAG 2.x Level AA uses a 4.5:1 minimum; for large text, 3:1. Testing a brand color on a white page is not enough if the brand color also appears as the filled background of a button. The button label is a second, separate contrast pair.
Do not confuse a passing ratio with an accessible component
WCAG contrast scores tell you about the luminance difference, but they do not verify font legibility, target size, focus visibility or whether an error was communicated with more than color. Disabled components also involve different design considerations. Treat ratio checks as an essential automated signal, not a complete compliance certificate.
Check the hidden trouble spots
Test placeholders, input labels, breadcrumbs, tabs, table headings, caption text and inline links. Designers often make these elements excessively pale because they want the interface to feel calm. A secondary text role should still be readable. Compare darkening text versus lightening the surface and choose the option that preserves the intended hierarchy.
Use specific pairs from your working design
Build a quick checklist with at least: body text/background, body text/card surface, primary button text/primary fill and muted text/background. Add hover, selected and error states when they appear in your app. Recheck after applying an image-derived palette; attractive colors sampled from a photograph are not automatically fit for user-interface text.
Test on actual devices
Zoom the page, browse with keyboard and inspect the small-screen layout under bright ambient light. Print-like previews and desktop screenshots do not perfectly predict all mobile displays. The Contrast Checker computes ratios while the Theme Studio helps reveal whether the combinations make sense in a representative UI.
Before you ship
Compare the colors against the actual design, verify small text and form states with the Contrast Checker, and export named tokens so future edits remain consistent. There is no palette that automatically makes every interface accessible.
Try it with real colors.
Explore a harmonious palette and see what your choices do in an interface.
Open color studio