A website color scheme is the set of colors a site uses for text, backgrounds, links and accents, and it stays readable when text meets a contrast ratio of at least 4.5:1 against its background under the Web Content Accessibility Guidelines (WCAG).
Palette choices also shape layout work and template selection, which the guide to web design templates covers in more depth.
What a readable palette has to do
A palette is a working tool before it is a mood. Every color in it ends up in one of a few jobs: page background, body text, links and buttons, borders, status messages, or decoration. Decoration can be as loud as the brand wants. The other jobs need to be legible for people with low vision, for people who see colors differently, and for anyone reading on a phone in bright light.
The Web Content Accessibility Guidelines, published by the W3C Web Accessibility Initiative, turn legibility into measurable thresholds. The “Contrast (Minimum)” success criterion says the visual presentation of text and images of text has a contrast ratio of at least 4.5:1, with an exception for large text. Large-scale text and images of large-scale text need at least 3:1. These two numbers are the backbone of any palette check, and the rest of this page leans on them.
A palette that begins with those two thresholds makes later decisions cheaper. Picking a brand blue and discovering afterwards that it fails on a white background means recoloring buttons, links, charts and focus rings in a hurry. Testing the candidate text and background pairs first avoids that work.
Contrast ratios for text
A contrast ratio compares the brightness of two colors. WCAG does not ask for beauty or for a particular hue. It asks that the pair of text color and background color is distinguishable enough. A mid-grey on white often looks calm in a design file and then fails on a laptop screen.
Large text gets a lower bar because bigger letterforms stay readable at lower contrast. WCAG’s explanation states that 18 point text or 14 point bold text is judged to be large enough to require a lower contrast ratio. A heading set at that size can use a lighter tint than body copy, while captions, form labels and footer links must meet the full threshold because they are small.
| Element | Minimum contrast against its background |
|---|---|
| Body text and other normal-size text | 4.5:1 |
| Large text (18 point, or 14 point bold) | 3:1 |
| Interface components such as input borders and button outlines, and meaningful graphics | 3:1 against adjacent colors |
Thresholds are quoted from the W3C pages for Understanding Contrast (Minimum) and Understanding Non-text Contrast.
Two practical notes follow from the criterion. Text that is part of an inactive interface component, or that is pure decoration, is exempt, so a disabled button may be dimmed. And the numbers are thresholds: a computed ratio just under the line does not pass, so a palette should sit comfortably above it rather than exactly on it.
Contrast for buttons, borders and icons
Text is only part of the problem. The “Non-text Contrast” criterion covers user interface components and graphical objects. It asks for a contrast ratio of at least 3:1 against adjacent colors for the visual information required to identify interface components and their states, and for the parts of graphics required to understand the content.
In palette terms, that means the border of a text field needs enough contrast with the page background for people to see where the field is, unless the field is identifiable another way. A checkbox outline, a focus ring and the active state of a tab all fall under the same rule. Light grey hairlines on white, common in minimal designs, are the usual failure.
The same page notes that not every graphical object needs to contrast with its surroundings, only those that are required for a user to understand what the graphic is conveying. A decorative background swirl can stay subtle, while a chart line or a key icon cannot.
Do not let color carry the meaning alone
A scheme often assigns red to errors and green to success. That is a useful convention and a trap. WCAG’s “Use of Color” criterion states that color is not used as the only visual means of conveying information, indicating an action, prompting a response, or distinguishing a visual element. The accompanying explanation gives the reason in one line: not everyone sees colors, or sees them the same way.
The fix is to add a second cue. An error field can carry an icon and a text message beside its red border. A link inside a paragraph can keep its underline instead of relying on a shade of blue. A chart can use direct labels or patterns next to its colored series. Each of these keeps the palette free to change later without breaking meaning.
Planning those second cues is easier at the layout stage, which is one reason a website wireframe usually comes before color decisions; status messages and states can be marked in grey boxes first and colored afterwards.
Building the palette: roles before hues
A workable approach is to name roles first and choose hues second. A small set of roles covers most sites:
- Surface: the page background and any card or panel backgrounds.
- Text: a primary text color, plus a quieter secondary one for captions and metadata.
- Action: the color of links, buttons and focus states.
- Feedback: success, warning and error colors, each paired with an icon or label.
- Accent: a decorative color that carries no required information.
Test every text color against every surface it will sit on, not only the main page background. A secondary grey that passes on white can fail on a tinted card. Test the action color both as link text on the page and as a button fill with its label on top.
Type size interacts with all of this. Thin weights and small sizes make the same colors harder to read, so the choices in web typography and the palette should be judged together on real text rather than on swatches.
Supporting light and dark preferences
Many visitors choose a dark or light theme in their operating system. MDN describes the prefers-color-scheme CSS media feature as the way to detect if a user has requested light or dark color themes, and notes that a user indicates the preference through an operating system setting or a user agent setting. A site can honor that signal by defining its palette roles once and swapping their values inside a prefers-color-scheme block.
The roles approach pays off here. If every component refers to “surface” and “text” instead of fixed hex values, a dark theme is a second set of values for the same roles. The contrast checks apply again to the new pairs: a dark theme is not automatically accessible, and pure white text on pure black can feel harsh, so many designers use a slightly softened pair that still clears the thresholds.
A short review routine
- List each role and the text, border or icon colors that sit on it.
- Measure each pair with a contrast checker and compare it with the thresholds in the table above.
- Check that no state, error or link relies on color alone.
- Repeat for the dark theme if the site offers one.
- Look at the pages on a real phone screen outdoors or with brightness turned down, since glare and dim screens expose weak pairs quickly.
Tools for generating and checking palettes vary a lot, and none of them replace this routine. A generator proposes harmonious hues; only a contrast measurement tells whether a pair is readable.
Frequently asked questions
What contrast ratio should body text have?
Body text should reach 4.5:1 against its background, and large-scale text can drop to 3:1.
What counts as large text?
Text set at 18 point, or 14 point when bold, counts as large. Smaller text falls under the stricter rule.
Do icons and input borders need contrast too?
Yes, when they are required to identify a component or understand a graphic. The Non-text Contrast criterion sets a lower, 3:1 bar against adjacent colors for those parts.
Is red and green enough to show errors and success?
No. Color should not be the only visual means of conveying information, so pair each color with an icon, label or other cue.
How can a site follow a visitor’s dark mode setting?
The prefers-color-scheme media feature detects whether a user has requested a light or dark theme, so a stylesheet can switch palette values to match.
