What contrast ratio means
Contrast ratio compares the brightness of text and its background. It runs from 1:1 for identical colors to 21:1 for black on white. The Web Content Accessibility Guidelines set minimum ratios for different text sizes, which many accessibility standards and laws reference.
Targets to aim for
At level AA, normal body text should reach at least 4.5 to 1. Large text, generally 18 points or 14 points bold and above, needs at least 3 to 1. User interface parts such as form field borders and focus outlines should reach 3 to 1 against their surroundings. Level AAA asks for higher values, 7 to 1 for normal text.
Check the current guideline wording if you have contractual or legal obligations, and ask a qualified professional about your specific requirements.
How to test your colors
Free contrast checkers let you enter two color codes and show the ratio with pass or fail. Browser developer tools display the ratio when you inspect text. Test the actual combinations on your site: body text, links, buttons, footer text, placeholder text inside forms and text over photos.
Brand colors are often the culprit. A light blue or yellow that works in a logo may fail as text.
Fixes that keep your brand
You do not have to abandon your palette. Darken the text color slightly, use the brand color for large headings or accents instead of paragraph text, or put the text on a darker panel. For buttons, flip the colors so a dark brand shade holds white text.
For text over images, add a dark overlay or a solid band behind the words. Never rely on the image happening to be dark in the right place.
Beyond ratios
Do not use color alone to carry meaning. A red outline around an error field should also come with a text message. Links within paragraphs should be underlined or otherwise distinct. Provide generous line spacing and avoid long passages in all capitals or tiny type.
Check how pages look in bright sunlight by turning your phone brightness down and testing outdoors. If you can barely read it, others cannot either. Retest after any theme or color update.
A quick audit routine
Pick five pages: home, a service page, contact, a blog post and the footer area. For each, check headline, body text, link color, button text, and any small gray text such as captions or dates. Write down failing combinations and fix them in the theme settings or style sheet in one pass.
Fixing a few global color variables often corrects dozens of spots at once, which makes this one of the cheaper accessibility improvements.
If you are choosing a new brand palette, test text and button combinations before printing materials. It is far easier to select a slightly deeper shade at the start than to retrofit it across a website, signs and vehicle wraps.
Common questions
Is contrast legally required?
Rules vary by place and situation. Many organizations aim for WCAG AA. Consult a qualified professional about your obligations.
Does dark mode change the requirement?
The same ratios apply to both light and dark presentations.
What about my logo?
Logos are generally exempt from contrast minimums, though readability still matters.
This guide is general information. Search engines change how they work and their guidelines; check Google's current documentation for your situation. Nobody can guarantee a ranking.