Color Contrast WCAG: Meeting 4.5:1 on Article Pages

Body text on an article page needs a contrast ratio of at least 4.5:1 against its background, and large text needs at least 3:1. Those two numbers come from WCAG 2.2 success criterion 1.4.3, and meeting them does not require a redesign: the work can come down to a handful of color values in one stylesheet. This helps editors, site owners, SEO specialists, and developers who maintain an article template.

Contrast is a readability and access matter. WCAG says nothing about search rankings, so treat the thresholds as a quality bar for readers, not as a ranking lever. A reader who cannot make out a sentence cannot use the answer it holds.

Thresholds and where they come from

Two thresholds, one formula

The Understanding page for 1.4.3 (Opens in a new tab) (Contrast Minimum, level AA) asks for 4.5:1 for text and images of text, and 3:1 for large-scale text. The ratio is calculated as (L1 + 0.05) / (L2 + 0.05), where L1 is the relative luminance of the lighter color and L2 that of the darker one. Relative luminance weights the red, green, and blue channels at 0.2126, 0.7152, and 0.0722. Because green carries the heaviest weight, two colors that look similar to you can land far apart on the scale, and two that look different can land close together.

You do not need to do the arithmetic. Browser developer tools and online checkers apply the same formula. What matters is the input: the real text color and the real background color the text sits on.

What counts as large text

The page defines large-scale text as at least 18 point, or at least 14 point if bold. Using the 1 point = 1.333 pixel conversion it mentions, 14 point is about 18.5 pixels and 18 point is 24 pixels. A bold 19-pixel subheading therefore qualifies for 3:1, while a regular-weight 20-pixel intro paragraph does not.

Practical suggestion: do not lean on the large-text allowance for headings that shrink on small screens. A heading that is 28 pixels on a desktop and 20 pixels on a phone drops out of the large category on the phone, so choosing heading colors that clear 4.5:1 removes the surprise.

Computed values are not rounded

The page states that computed values should not be rounded: 4.499:1 fails 4.5:1. The Non-text Contrast page repeats the point for its 3:1 threshold, where 2.999:1 fails. If a color pair sits right on the line, nudge it one step darker or lighter and move on.

Which color pair changes first

Decision rule: what changes first

When a pair fails, change the smallest thing that fixes it, in this order. First adjust the text color, which keeps the brand colors available as backgrounds and accents. If the text color is a mandatory brand color, change the background. If neither can move, use that color only for large or bold text and apply the 3:1 threshold, then confirm the rendered size at every breakpoint. Last, replace text baked into an image with live text so its colors can be edited.

Brand pressure has limits. The 1.4.3 page exempts logotype text but says the exemption does not apply when the logo works as a control, or when low contrast is the author's choice rather than a brand requirement.

Pair inventory and measuring

Build a pair inventory

An article template uses a small set of colors: body text, secondary text, link, visited link, headings, page background, card background, borders, and an accent. Write each of them down next to the background it is used on. Those pairs are what you measure. Auditing one article page after another repeats the same measurement hundreds of times, while auditing the pairs once covers every article that shares the template.

Add two columns to the inventory: the measured ratio and a pass or fail mark. When the theme changes next quarter, the inventory tells you what to re-measure and who changed what.

Measure from source values

The page says the colors to test are the ones specified in the markup and style sheets or by the user agent, not the on-screen result after anti-aliasing. Read the values from your CSS variables rather than sampling a screenshot with an eyedropper. Screenshots go through scaling and compression, and thin strokes look fainter than they are specified.

The same page notes that if no background color is specified, white is assumed. A component that sets its own text color but inherits its background from a parent can behave unexpectedly when a user's browser settings override colors. Practical suggestion: set the pair in the same rule.

Where tools run out

Automated checkers handle plain text on a flat background well. Text over a photograph, a gradient, or a semi-transparent overlay needs a human decision, because the Understanding page only says that background images must give the text enough contrast and lists the opposite as failure F83. It does not prescribe a sampling method. Agree on one inside the team. Practical suggestion: record the lightest and darkest points under the text and keep the worse result.

Tools also cannot judge whether meaning is carried by color alone. Whether a green cell has a word next to it is a question for a person reading the draft.

Links, buttons and focus rings

Inline links against surrounding text

The Use of Color page (Opens in a new tab) says color cannot be the only visual means of conveying information, indicating an action, prompting a response, or distinguishing a visual element. For inline links it lists technique G183, which uses a contrast ratio of at least 3:1 between link text and surrounding text, and failure F73, links that are not visually evident without color vision. The page does not mention underlines.

Read together with 1.4.3, that gives two separate checks: the link text must clear 4.5:1 against the page background, and the link must be distinguishable from nearby body text. Practical suggestion: keep underlines on links inside article paragraphs. They are the cheapest way to meet the second check without depending on color perception.

Component boundaries

The Non-text Contrast page (Opens in a new tab) (1.4.11) requires 3:1 against adjacent colors for user interface components and the states they show, plus graphical objects needed to understand content. Visual information required to identify a control and know how to operate it must meet the ratio. A button whose boundary is the only clue that it is a button needs a boundary at 3:1. If visible text or a sufficiently contrasting icon already identifies the control, the page says the boundary itself is not required to meet the ratio.

Focus indicators

For focus, the page says the indicator must have 3:1 against adjacent colors when the component has focus. An indicator outside the component is compared with the background the component sits on, one inside is compared with the component's own colors, and one straddling the edge needs only one side to contrast. The browser's default focus style falls under the user-agent exemption but still has to be visible. The moment you write your own focus style, the 3:1 requirement is yours.

Hover, visited, and disabled states

Author-added hover effects do not need to reach 3:1, according to the page, because the pointer position already signals hover. They must not reduce the contrast of the component or of other state indicators. Contrast between states that are never shown side by side, such as visited and unvisited links, is not required. Text inside each state is still text, so each link color has to pass 1.4.3 on its own. Disabled controls are exempt from both criteria.

The editorial consequence: do not fade visited links so far that they become hard to read. The exemption covers the difference between two states, not the legibility of the visited state.

Meaning beyond color

Required fields and errors

Success criterion 1.4.1 is level A and concerns color perception. Its stated intent is that people who cannot perceive certain colors can still reach information conveyed by color. Color use is not discouraged; color coding is fine when something else, such as a shape, text, or pattern, carries the same information. The page also says a clear lightness difference of at least 3:1 can count as an additional visual cue, but where understanding depends on a specific color, such as green for valid and red for invalid, another indicator is still needed.

Its examples include a required-field label that is red and also marked with an icon, and the sentence "error is shown in red" as information that needs a non-color cue. Failure F81 names required or error fields identified only by color differences. A newsletter signup or comment form on an article page falls under this.

Charts that rely on color

The page gives the example of sales for one person in red and another's in blue as color-only meaning. Its techniques include combining color and pattern (G111) and making sure the information conveyed by color is also available in text (G14). Practical suggestion: label series directly at the end of each line, or vary line styles.

For pie charts, the 1.4.11 page separates three cases. Slices distinguished only by low-contrast edges, with no labels or values giving the same information, fail. With visible labels and values conveying equivalent information, the criterion does not apply. With labels present and slice edges at 3:1, the chart passes.

Callout boxes

If a tip is a green box and a warning is a red box, start each with a word such as "Tip:" or "Warning:". That is G14 in practice, and it also helps screen reader users, who receive the same information.

Themes and photo overlays

Two themes mean two sets of pairs

The contrast pages do not distinguish light themes from dark ones. The criteria apply to the specified foreground and background colors, so each theme is its own set of pairs. A gray that clears the threshold on white can fall below 3:1 against a dark background. Practical suggestion: keep a table of theme variables for both modes and re-measure it after any palette change.

A second trap in dark mode is pure white text on pure black. The ratio is very high, but long reading can feel harsh. The criteria set no maximum ratio, so that is a design choice. A high ratio does not guarantee comfortable reading, while a low one reliably hurts it.

Headlines on cover photos

When a headline sits on a hero photograph, the 1.4.3 page requires that background images give the text sufficient contrast and names F83 as the failure. It has no dedicated section on gradients. Practical suggestion: measure the lightest region under the headline, and if it fails, add a semi-opaque dark layer under the text or move the headline to a solid block.

The 1.4.11 page has a separate rule for multi-color graphics and gradients: test the least-contrasting area, and the graphic passes if it stays understandable without that area. That rule is for graphical objects. Text, including text inside an image, is judged under 1.4.3.

Moving or semi-transparent backgrounds

A sticky header with a translucent background changes ratio as content scrolls beneath it. Practical suggestion: measure the worst moment, when the lightest content passes behind it, or give the header a solid color.

Slips, fixes and quiet text

A short field guide

The same handful of mistakes keep appearing in article templates, and each maps to a criterion you have already seen. The table pairs the slip with the page that covers it and the smallest repair.

Start with the first two rows. Body text and links appear hundreds of times across a site, so one variable change there improves more pages than any other fix on the list.

Text inside images is the expensive case

The 1.4.3 page covers images of text as well as live text, so a pull quote exported as a graphic must also reach 4.5:1. The difference is repair cost. Live text can be fixed by editing one color value. Text baked into a PNG or a banner needs the graphic to be reopened and exported again, and every page that embeds it has to be updated. Where the choice exists, prefer live text styled with CSS and keep the image for the picture itself.

Infographics raise a second issue that contrast alone does not solve: the words inside them are invisible to readers who cannot see the image. The companion topic of long descriptions for charts handles that; for contrast, the rule is simply that the embedded text meets 4.5:1 or, if large, 3:1.

Placeholders, small print, and other quiet text

The 1.4.3 page also covers placeholder text and text shown on hover or focus. Search boxes with pale placeholder text, light-gray author bylines, and tiny legal footers are small, quiet, and easy to overlook, and they are normal-size text that needs 4.5:1. Give them the same audit as the paragraph text instead of treating them as decoration. The exemption for pure decoration applies only when the words could be rearranged or replaced without changing the purpose of the page, which is not true of a byline or a footer notice.

A template checklist

Checklist for an article template

• Paragraph, list, and table text reaches 4.5:1.
• Captions, footnotes, and date lines reach 4.5:1.
• Inline links are distinguishable from surrounding text by something besides color.
• Any custom focus indicator reaches 3:1 against adjacent colors.
• Buttons and form fields are identifiable by boundary, text, or icon.
• Errors, required fields, callouts, and chart series use text, icons, or patterns alongside color.
• Both themes were measured separately.
• Text over images was measured at its weakest region.
• Measurements came from CSS values, not screenshots.

Worked example: a recipe site

Example scenario: a recipe site with a dark mode

Example scenario: a recipe site uses pale gray body text on cream, a light green link color, and a dark mode that reuses the same grays on charcoal. The pair inventory shows three things: body text on cream is under 4.5:1, the green link fails against cream and is barely different from the surrounding gray, and in dark mode the secondary gray used for ingredient notes falls under the threshold on charcoal.

The fixes stay small. Darken the body gray in one variable, which repairs every recipe at once. Switch links to a deeper green and add underlines, which solves the background ratio and the distinction from body text in one change. Define a separate dark-mode gray for ingredient notes and re-measure. The photo-based recipe hero keeps its look, with a semi-opaque layer behind the title. The recipe cards, fonts, and layout do not change.

Keeping it fixed over time

Add a short check to the editorial workflow. Did anyone set a manual color in the editor? Is there text over an image, and was it measured? Does a chart or table use color to carry meaning, and is there a second cue? Was a new link or button style added? A yes to any of these sends that part of the draft to a developer or designer for one measurement.

Heading structure and readable formatting belong to the same reading experience; the heading structure guide and the readable formatting guide cover them. Alternative text for photos is a separate topic handled in article image alt text and stock image licensing, and the image SEO guide covers how page text supports images in search.

The thresholds above follow the WCAG 2.2 Understanding pages as published. Standards and supporting pages can change, so check the current page before applying a value.

Frequently Asked Questions

What contrast ratio does body text need?

WCAG 2.2 success criterion 1.4.3 asks for at least 4.5:1 for normal text. Large-scale text, meaning at least 18 point or at least 14 point bold, needs at least 3:1. Computed values are not rounded.

How large is large text in pixels?

The Understanding page uses a 1 point = 1.333 pixel conversion, which makes 14 point about 18.5 pixels and 18 point 24 pixels. The 14 point threshold applies to bold text only.

Do logos need to meet the ratio?

Text in a logo or logotype is exempt. The exemption does not apply when the logo works as a control, or when low contrast is the author's choice rather than a brand requirement.

Is a different link color enough to mark a link?

The Use of Color page offers technique G183, at least 3:1 between link text and surrounding text, and lists links that are not evident without color vision as failure F73. It does not mention underlines, so adding one is a practical suggestion.

Does a hover effect need 3:1?

According to the Non-text Contrast page, author-added hover effects do not need to reach 3:1, but they must not reduce the contrast of the component or of other state indicators.

Do I measure dark mode separately?

The contrast pages do not distinguish themes. The criteria apply to the specified color pairs, so each theme should be measured on its own.

Does contrast improve search rankings?

The WCAG pages state no link between contrast and rankings. The reason to meet the thresholds is that readers can actually read the text.

Conclusion

On an article page, contrast comes down to a short list: 4.5:1 for body and caption text, 3:1 for large text, interface components, and focus indicators, and no meaning left to color alone. Inventory the color pairs in the template, measure them from source values in both themes, and then handle text over photos and color-coded charts one at a time. The thresholds can change, so check the current pages before applying them.

If you want help producing articles that are readable and accessible from the first draft, you can look at the content writing service at Akua Adforce.