Visual Accessibility Testing

Text contrast: what the ratio means and how to measure it

1.4.3 Contrast (Minimum) (AA) requires text and images of text to have a contrast ratio of at least 4.5:1 against their background, or 3:1 for large-scale text. WCAG defines large scale as at least 18 point, or 14 point bold (in CSS pixels, 18pt is 24px and 14pt is about 18.7px). Text in inactive components, pure decoration, invisible text, text that is part of a picture with significant other visual content, and logotypes have no contrast requirement. The stricter 1.4.6 Contrast (Enhanced) is AAA at 7:1 and 4.5:1.

The ratio is not a design opinion. WCAG defines it from the relative luminance of the two colours — the relative brightness of each colour on a scale from 0 for darkest black to 1 for lightest white, computed from its sRGB values — and the resulting ratio runs from 1:1 to 21:1. Use a contrast checker that implements the WCAG definition; do not estimate by eye.

For example: grey #767676 on white is 4.54:1 and passes for body text; #777777 on white is 4.48:1 and fails for normal-size text (do not round up), though it passes for large text. Measure the colours as rendered: text over a photo or gradient must be checked at its worst point, and hover, focus, visited, selected and error states each need their own measurement.

• Pick colours with the browser devtools colour picker or read them from the computed styles, not from the design file.
• Check body text, secondary text, links, button labels, input text and hint text, table headers, badges and toast messages.
• Check text on images and on semi-transparent overlays at the lightest area behind the text.
• Disabled controls are exempt, but a control that merely looks disabled while still working is not.

Try it: Color Converter Try it: HEX / RGB / HSL Converter

Non-text contrast: components, states and graphics

1.4.11 Non-text Contrast (AA) requires 3:1 against adjacent colours for the visual information needed to identify user-interface components and their states, and for the parts of graphics required to understand the content. Inactive components and unmodified browser-default controls are excepted, as are graphics where a particular presentation is essential.

The usual failures are pale input borders (a #CCCCCC border on white is 1.61:1), a checkbox whose checked state differs only by a faint tint, icon-only buttons in light grey, focus indicators that barely differ from the background, and chart lines or pie segments distinguished only by similar pastel colours. If a field has no visible border at all, check that something else identifies it as a field — a background fill or an underline that meets 3:1.

Use of colour

1.4.1 Use of Color (A) says colour must not be the only visual means of conveying information, indicating an action, prompting a response or distinguishing an element. This is separate from contrast: two colours can both pass contrast and still be indistinguishable for someone with a red–green deficiency.

Test by switching the page to greyscale (an operating-system colour filter or a browser vision-deficiency emulation) and asking: can I still tell which field is in error, which link is a link, which line on the chart is which, which status is “failed”? Links inside body text that differ from surrounding text only by colour need an underline or another non-colour cue.

Text alternatives: deciding what the alt text should be

1.1.1 Non-text Content (A) requires a text alternative that serves the equivalent purpose. Tools can tell you whether an alt attribute exists; only a person can decide whether it is right. Classify each image first, then judge the text.

• Informative image — alt conveys the information the image adds in context, briefly: “Bar chart: refunds fell from 9% to 4% after the new checkout” rather than “chart.png”.
• Decorative image — empty alt (alt="") or a CSS background, so screen readers skip it. A decorative image with alt="decorative swirl" is noise.
• Functional image — an image that is a link or button: alt describes the action or destination (“Search”, “Download invoice PDF”), not the picture (“magnifying glass”).
• Complex image — charts, diagrams, maps: a short alt that identifies it plus a longer description or data table nearby that carries the detail.
• Images of text — 1.4.5 Images of Text (AA) requires real text instead of images of text when the technology can achieve the same visual presentation; customizable images and essential ones such as logotypes are excepted.
• Redundant alt — if the adjacent text already says it, the image can be decorative; repeating the caption doubles what a screen-reader user hears.

Resize text, reflow at 320 CSS px and text spacing

1.4.4 Resize Text (AA): text can be resized up to 200 percent without assistive technology and without loss of content or functionality. Test with browser zoom at 200% and with a larger default font size, and look for clipped text, overlapping elements and controls that move off-screen.

1.4.10 Reflow (AA): content works without scrolling in two dimensions at a width equivalent to 320 CSS pixels (for vertically scrolling content) or a height of 256 CSS pixels (for horizontally scrolling content). WCAG notes that 320 CSS pixels corresponds to a 1280 px wide viewport at 400% zoom, which is the practical test: set the browser window to 1280 px, zoom to 400%, and read the whole page scrolling only vertically. Maps, diagrams, video, games, presentations and data tables may keep two-dimensional scrolling for those parts.

1.4.12 Text Spacing (AA): no content or functionality is lost when the user sets line height to 1.5 times the font size, spacing after paragraphs to 2 times, letter spacing to 0.12 times and word spacing to 0.16 times. Apply the override below with a bookmarklet or a user-stylesheet extension and look for truncated labels, overlapping text and buttons whose text is cut off. WCAG includes an exception for languages and scripts that do not use one of these properties — relevant to Arabic, where letter spacing interacts badly with joined letterforms; agree with your team how you apply it.

/* WCAG 1.4.12 text-spacing test override */
* {
  line-height: 1.5 !important;
  letter-spacing: 0.12em !important;
  word-spacing: 0.16em !important;
}
p {
  margin-bottom: 2em !important;
}

Target size

2.5.8 Target Size (Minimum) (AA), new in WCAG 2.2, requires pointer targets to be at least 24 by 24 CSS pixels, with exceptions. An undersized target passes if a 24 CSS px diameter circle centred on it does not intersect another target or another undersized target’s circle; it also passes when an equivalent control that meets the size exists on the same page, when it is inline in a sentence, when its size is set by the user agent and not modified, or when the presentation is essential or legally required.

Measure in devtools (the element’s box, including padding that is part of the clickable area). Typical failures: close “×” icons in dialogs and chips, pagination numbers packed together, small checkboxes, and icon rows in table cells. Mobile platform guidelines from Apple and Google recommend larger touch targets than this minimum; when testing native apps, use the platform guidance as well.

Motion, animation and reduced-motion preferences

Three criteria matter. 2.2.2 Pause, Stop, Hide (A): moving, blinking or scrolling content that starts automatically, lasts more than five seconds and is shown alongside other content needs a way to pause, stop or hide it — carousels and marquee banners are the usual suspects. 2.3.1 Three Flashes or Below Threshold (A): nothing flashes more than three times in any one-second period, unless the flash is below the general and red flash thresholds. 2.3.3 Animation from Interactions (AAA): motion animation triggered by interaction can be disabled unless it is essential.

Even when a project targets AA, honouring the operating-system “reduce motion” setting is cheap and expected. Browsers expose it through the prefers-reduced-motion media feature. Turn on reduce motion in the OS (or emulate it in devtools) and verify that parallax, zoom-in page transitions, auto-playing background video and large sliding effects are removed or replaced by simple fades.

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

Dark mode, high contrast and forced colours

A dark theme is a second visual presentation, and every contrast check applies to it independently. Common dark-mode defects: brand colours that pass on white but fail on near-black, transparent PNG logos and icons with dark strokes that vanish, focus rings designed for a light background, charts that keep light-theme palettes, and shadows used as the only boundary of a card or field. Switch themes with the OS setting or the prefers-color-scheme emulation in devtools and re-run the contrast pass.

Also test with a forced-colours or high-contrast mode (for example Windows contrast themes). The browser replaces author colours, so information carried only by background colour or background images can disappear: custom checkboxes drawn with backgrounds, icons implemented as CSS backgrounds, and focus styles that rely on box-shadow alone.

Checklist: visual accessibility test cases

VISUAL A11Y CHECKLIST — <page / screen / build / theme>

Contrast
[ ] Body, secondary, link, button, input and hint text >= 4.5:1 (large text >= 3:1) (1.4.3)
[ ] Text over images/gradients measured at the worst point
[ ] Hover, focus, selected, visited and error states measured
[ ] Input borders, icons, checkbox/radio states, focus indicator >= 3:1 (1.4.11)
[ ] Chart elements needed for understanding >= 3:1 against neighbours (1.4.11)

Colour
[ ] In greyscale, errors, links, statuses and chart series are still distinguishable (1.4.1)

Images
[ ] Each image classified: informative / decorative / functional / complex (1.1.1)
[ ] Functional images describe the action; decorative have alt=""
[ ] No images of text except logos (1.4.5)

Zoom & layout
[ ] 200% zoom: no clipped or overlapping text, all functions available (1.4.4)
[ ] 1280px at 400% (= 320 CSS px): vertical scroll only, except 2-D content (1.4.10)
[ ] Text-spacing override: nothing truncated or overlapping (1.4.12)

Targets & motion
[ ] Pointer targets >= 24x24 CSS px or meet an exception (2.5.8)
[ ] Auto-moving content > 5 s can be paused/stopped/hidden (2.2.2)
[ ] No flashing more than 3 times per second (2.3.1)
[ ] Reduce-motion setting removes non-essential motion

Themes
[ ] Dark theme: full contrast pass repeated
[ ] Forced colours/high contrast: controls, icons and focus still visible

Try it: AI QA Checklist Generator

Typical defects, written as bug titles

Quote the measured colours and ratio in the report, attach a screenshot, and name the criterion. A contrast bug with “#9E9E9E on #FFFFFF = 2.68:1, required 4.5:1” gets fixed without debate.

• “Login: hint text #999999 on white is 2.85:1, below 4.5:1 (1.4.3)”
• “Profile form: input borders #CCCCCC on white are 1.61:1, fields not identifiable (1.4.11)”
• “Orders table: status ‘Failed’ vs ‘Paid’ shown only by red/green dot (1.4.1)”
• “Header search button: image alt is ‘magnifier icon’ instead of the action ‘Search’ (1.1.1)”
• “Pricing page at 1280px/400% zoom: comparison cards require horizontal scrolling (1.4.10)”
• “Chip close buttons are 16×16 CSS px and touch each other (2.5.8)”
• “Home carousel auto-advances every 4 s with no pause control (2.2.2)”
• “Dark theme: primary button text 3.1:1 on brand blue (1.4.3)”

Try it: AI Bug Title Generator

Frequently asked questions

References

• Web Content Accessibility Guidelines (WCAG) 2.2W3C · 2024The W3C Recommendation that defines the testable success criteria for accessible web content, organised under four principles and three conformance levels (A, AA, AAA).
• Understanding WCAG 2.2W3C Web Accessibility Initiative (WAI)The informative explanation of each WCAG 2.2 guideline and success criterion: intent, who benefits, examples and techniques (not normative).
• How to Meet WCAG (Quick Reference)W3C Web Accessibility Initiative (WAI)A filterable checklist of every WCAG 2.2 success criterion with its sufficient techniques and common failures.
• Easy Checks – A First Review of Web AccessibilityW3C Web Accessibility Initiative (WAI)Simple first checks anyone can run — page title, text alternatives, headings, contrast, text resize, keyboard access — before a full evaluation.
• Accessibility — MDNMDN Web Docs (Mozilla)Practical guides to building and checking accessible web pages: semantic HTML, ARIA, keyboard support and testing.
• Accessibility — Human Interface GuidelinesAppleApple's accessibility design guidance for iOS and other platforms: VoiceOver, Dynamic Type, contrast, touch targets and motion.
• Test your app's accessibilityAndroid Developers (Google)How to test an Android app's accessibility manually with TalkBack and other services, and automatically with the platform's testing tools.