Review color, typography, contrast, and motion in the real healthcare website states where people read and act. Test production-like content, links, focus, errors, confirmations, zoom, text-spacing changes, reduced-motion preferences, and responsive reflow. Record the exact condition and task effect of every finding. A palette check alone cannot establish that a website is readable or accessible.
The practical goal is to find where a person can no longer identify, understand, or operate something important. Standards and automated tools help define some tests, but they do not replace human evaluation or provide legal certification.
Build a page sample that can reveal problems
Do not begin with the homepage alone. Choose a small sample that contains the website's riskiest patterns and longest real content. Include a service page, provider profile, location page, article, search result, form, validation state, confirmation state, and an embedded scheduler or video if used.
Use approved production-like text without patient information. Short placeholder labels hide wrapping and hierarchy problems. A card that looks balanced with “Dr Smith” may fail with a long professional title and several credentials.
For every page, name one task. “Review the design” is too broad. Better tasks include finding the service location, distinguishing the primary action, correcting an invalid field, and pausing moving content.
Measure contrast in the rendered state
Contrast belongs to a particular foreground, background, size, weight, and state. Measure the actual rendered combination, including text over images, gradients, tinted cards, active navigation, error messages, focus indicators, and controls that look disabled but remain available.
WCAG 2.2 defines a minimum contrast ratio of 4.5 to 1 for regular text and 3 to 1 for qualifying large-scale text under its contrast criterion. Those numbers answer one technical question. They do not measure reading comfort, content clarity, glare, font rendering, cognitive load, or full conformance.
Color must not carry the meaning alone. A red outline does not explain why a field failed. A green appointment slot and a grey unavailable slot need persistent labels or another understandable cue. Check each state on its own because the visitor may never see the comparison.
Use this finding format: “On the north-location form at 200 percent zoom, the required-field explanation renders light grey on white at the recorded ratio, and the visitor cannot distinguish help text from unavailable text.” It identifies the page, state, condition, and task effect.
Does the type hierarchy survive real healthcare language?
A useful type hierarchy shows which information belongs together and what requires attention. Test it with service names, clinical terms, provider credentials, preparation instructions, dates, qualifications, and location details on the same screen.
Check whether the main answer is visually dominant without making important limitations disappear. Supporting text should look secondary, not optional. Linked phrases must remain recognizable without relying only on color. All-capital labels and extreme weight differences can become tiring and may not create a clear relationship.
Read the page from the heading list alone. Then read only the bold or visually emphasized phrases. If either route tells a different story from the full content, the hierarchy is distorting meaning.
Use zoom to expose layout decisions
WCAG's resize-text criterion includes the ability to enlarge text to 200 percent without losing content or functionality through the applicable supported mechanism. Treat this as a layout and task test, not merely a font-size test.
At 200 percent browser zoom, try the page's primary task. Open the navigation, dismiss any overlay, read the full heading, reach the form labels, correct an error, and submit. Look for clipped text, horizontal scrolling in ordinary content, controls covered by sticky elements, and modals that extend beyond the reachable viewport.
Do not repair a failure by shrinking the most important text. Remove rigid heights, allow wrapping, simplify crowded controls, and let the document grow. Test intermediate widths as well as common device presets because breakpoints can hide a failure that appears between mockups.
Override text spacing and watch components flex
Some users change line, paragraph, letter, or word spacing. WCAG 2.2 defines a text-spacing test with specific override values. The operational question is whether those changes make content overlap, clip, disappear, or become impossible to operate.
Apply the override to navigation, buttons, accordions, form labels, help text, error summaries, notices, tables, and captions. Components with fixed heights are frequent failure points. Check that expanded text remains associated with its label and does not cover a neighbouring control.
A rough-looking result is not automatically a task failure. Record what becomes unreadable or unusable. This distinction keeps repairs focused and avoids presenting taste as a standard requirement.
Test focus as a visible reading guide
Navigate each sample page using the keyboard alone. The focus indicator should be visible against the component and adjacent colors, and the order should follow the intended task. Open menus, accordions, dialogs, and the form. Confirm that focus enters, remains within, and leaves temporary interfaces in an understandable way.
Pay attention to sticky headers and banners. A focused control can technically exist while being hidden behind a fixed element. Also check error recovery. When submission fails, the visitor needs a discoverable summary or clear movement to the affected field, not a silent color change below the fold.
Document the exact keystroke sequence that reproduces a problem. “Keyboard issue” gives a developer little to work with. “After opening the location dialog with Enter, pressing Tab moves focus to the page footer behind the dialog” is actionable.
Give motion a reason and a quiet alternative
Inventory carousels, autoplay video, parallax, animated counters, scrolling tickers, entrance effects, and interface transitions. For each one, write the information or task it supports. If the answer is only decoration, removing it may be the clearest repair.
WCAG includes requirements for pausing, stopping, or hiding certain moving content that starts automatically and lasts beyond the defined condition. The details depend on how the component behaves. Do not reduce the review to a timer without checking the applicable criterion.
Enable the operating system's reduced-motion preference and reload the page. Nonessential movement should become still or substantially quieter while information, focus, and state changes remain understandable. A blank area where animation used to be is not a successful reduced experience.
For autoplay media, test pause controls, keyboard access, labels, captions, and what happens when the media fails. Avoid sound starting without a deliberate visitor action.
Run the readability matrix in ninety minutes
Create rows for headings, paragraphs, links, buttons, labels, help text, errors, confirmations, focus, selected options, disabled controls, and captions. Use columns for default view, narrow view, 200 percent zoom, spacing override, reduced motion, and keyboard. Assign the most relevant combinations rather than testing every theoretical pair.
Capture these six fields for each finding:
- URL or component version.
- Content and interface state.
- Browser, viewport, zoom, and input method.
- Measured or observed condition.
- Effect on the named task.
- Owner, repair, and retest evidence.
Automated tools can accelerate contrast checks and identify some code-level issues. W3C evaluation guidance explicitly notes that tools alone cannot determine whether a site is accessible. Keep manual task testing and qualified evaluation in scope.
Turn findings into system repairs
Group the evidence by shared component and content role. If muted help text fails across forms, repair the token and verify every state that uses it. If long credentials break one provider card pattern, fix the component rather than shortening a real name.
Retest the exact failing condition and at least one neighbouring condition. A contrast change can affect hierarchy. A larger focus ring can be clipped. Removing motion can obscure status unless a static cue replaces it.
Report conclusions narrowly. Say which pages, components, states, settings, and tasks were tested. Do not call a passing sample “fully accessible,” and do not treat a failed automated check as a legal conclusion. Applicable obligations and formal conformance claims require qualified review.
Medical practice marketing teams should include the matrix and retest evidence in the acceptance criteria for custom healthcare website design. That keeps readability attached to live components and real content after the brand presentation is over.