What Makes a Good Mental Health Website Design?

Table of Contents
Ready to See Results?

From strategy to execution, we turn underperforming campaigns into measurable wins. Let’s put our expertise to work for your business.

Key Takeaways

  • Mental health sites fail across four measurable layers: readability, accessibility, imagery and trust, and navigation to intake, with published standards defining each rather than aesthetic taste.
  • Content consistently pitches too high, with grade levels ranging from 6th to 17th grade against a 6th-to-8th-grade target, screening out distressed visitors before they reach a phone number 15.
  • WCAG 2.2 Level AA is the working conformance target, and the DOJ treats accessibility as an ADA obligation covering contrast, labels, captions, keyboard access, and headings 2.
  • Sequence a redesign as rewrite, navigate, conform, then re-image, and validate each stage with five to seven users matching the patient profile before code hardens 17.

The Four Layers Where Mental Health Sites Quietly Lose Patients

Most mental health practice sites are judged on the wrong criteria. Owners ask whether the palette feels calming or whether the hero photo looks warm. Distressed searchers ask a different set of questions: Can I read this? Can I operate it? Do I trust it? Can I find the phone number in under ten seconds?

Research on this population converges on four measurable failure layers: readability, accessibility, imagery and trust, and navigation to an intake action. A systematic review of web use among people with mental disorders found consistent barriers in how this group perceives, understands, and operates websites 11. An assessment of mental health consumer sites returned mediocre scores across accessibility, usability, reliability, and readability, and found that dedicated mental health sites did not outperform general information sites 16.

Each layer maps to a published standard or peer-reviewed benchmark, not to taste. The sections that follow work through them in the order that determines whether a visitor completes an intake action: the words on the page, the code behind them, the images beside them, and the path connecting them to a phone call.

Readability Is the Diagnostic Hinge, Not the Aesthetic

The Grade-Level Gap Between Content and Reader

Before a visitor evaluates credentials or clicks a call button, they have to parse the words on the page. That is where most mental health sites break first, and the break is measurable.

A 2023 analysis of publicly available mental health information found grade-level readability scores ranging from the 6th grade to the 17th grade, with accessibility measures inconsistent across the sample 15. The recommended target for consumer health content sits in the 6th-to-8th-grade band. A meaningful share of the material studied sat well above that ceiling, which means a visitor with average reading proficiency, or one whose working memory is compressed by anxiety, depression, or acute distress, is being asked to decode graduate-level prose to figure out whether a practice treats their condition.

This is not an isolated finding. An earlier readability analysis of widely used mental health resources returned a comparable spread, with grade-level estimates from 5.62 to 17.9 and the majority of material above the 6th-to-8th-grade recommendation 14. Two studies, five years apart, describe the same pattern: mental health content is systematically pitched too high for the audience most likely to be reading it.

The operational consequence for a practice is direct. A service page describing intensive outpatient care at a 14th-grade level does not fail because it is boring. It fails because a distressed searcher stops reading before they reach the phone number. Readability is the first filter, and it screens out the exact visitors a practice is trying to reach.

Chart showing Readability Range of Public Mental Health Information (2023 Study)
Shows the range of grade-level readability scores found in a 2023 study of publicly available mental health information, indicating that content is often too complex.

Plain Language as an Operating Standard

Closing the grade-level gap is a content governance problem, not a copywriting flourish. The federal guidance for this work is specific.

The HHS Health Literacy Online guide sets the baseline: learn about the intended users, write actionable content, display it clearly, organize and simplify navigation, engage users, then evaluate and revise the site 3. The third edition of that guidance now centers people-first design, accessibility across devices, and explicit standards for content governance, treating a health website as a maintained product rather than a launched brochure 4. CDC guidance layers on the operating detail. Health information must be accurate, accessible, and actionable, and the guidance frames the test as whether materials can be skimmed and scanned using large font, sub-heads, bullets, and white space 8. The CDC’s Everyday Words for Public Health Communication supplies the substitution list that supports the Federal Plain Language Guidelines and the Clear Communication Index, giving writers a concrete way to swap clinical terminology for language visitors already use 9.

For a practice, this translates into a small set of enforceable rules. Service pages should be written at a target grade level and tested with a readability tool at each revision. Clinical terms should appear alongside the everyday phrase a visitor would type into a search bar. Headings should describe what the visitor will find, not what the practice calls the department. Bullet points should carry the action, not the qualification. The standard exists. The work is applying it page by page and refusing to ship copy that fails it.

Accessibility as Conversion Lever and Legal Exposure

What WCAG 2.2 Actually Requires

WCAG is the technical standard courts and federal agencies point to when they describe what an accessible website looks like. The current version, WCAG 2.2, adds nine new Success Criteria addressing barriers related to visual, mobility, hearing, and cognitive disabilities 1. That grouping matters for mental health practices because the audience skews toward users whose cognitive load is already elevated, and because the criteria translate into specific code and design decisions rather than abstract principles.

The visual criteria touch focus appearance and how clearly a keyboard user can see which element is active. The mobility criteria address minimum target size and dragging alternatives, which govern whether a person with tremor or limited fine-motor control can tap a phone-number button on a small screen. The cognitive criteria cover consistent help placement, accessible authentication that does not force memory tests, and redundant entry that avoids making a user retype information already provided. Hearing-related criteria continue to require captions and text alternatives for audio content, including any therapist-introduction videos on staff pages.

For a practice, conformance is not a badge exercise. It is a defined set of code-level checks that a developer or auditor either passes or fails against version 2.2. Level AA remains the working target that most public-sector procurement and legal guidance references. Treating the standard as the spec, rather than as a suggestion, converts accessibility from a subjective conversation into a testable one.

Translating ADA Guidance Into a Practice-Level Checklist

The Department of Justice frames web accessibility as an ADA obligation for public-facing businesses and publishes a practical list of what conformance looks like in practice. Its examples include sufficient color contrast, text alternatives for images, video captions, form labels, keyboard access, clear error messages, zoom support, meaningful headings, and reliable keyboard and mouse navigation 2. Each item on that list has an operational counterpart on a mental health practice site.

Contrast ratios apply to body copy, button text, form field labels, and any icon that carries meaning without a text label. Text alternatives cover clinician headshots, credential badges, and infographics describing levels of care. Video captions cover intro videos, virtual tour clips, and any recorded testimonial. Form labels cover intake forms, insurance verification forms, and the contact form itself, which is often where accessibility breaks down because required fields lack explicit labels or announce errors only through color. Keyboard access means a visitor who cannot use a mouse can reach the phone-number link, open the menu, submit the form, and dismiss any modal. Zoom support means the layout does not break when text is enlarged to 200 percent, which older visitors and those with low vision routinely need. Heading structure means H1, H2, and H3 tags describe the actual page hierarchy so screen readers can navigate it.

An audit against this list produces a defect log a developer can fix. It also produces a written record that the practice is meeting the standard the DOJ has publicly named.

How People With Mental Disorders Actually Experience the Web

Accessibility research on this population is narrower than the general disability literature, and the findings are pointed. A systematic review of barriers and facilitation measures for people with mental disorders using the web concluded that this group experiences barriers that limit how they perceive, understand, and operate websites 11. The three verbs are the ones WCAG uses. Perception, understanding, and operation are the exact layers the standard is written to protect.

Peer-reviewed work on digital mental health frames accessibility more broadly, defining it as content and design that is understandable and navigable with or without assistive technologies 10. That framing closes a gap common on practice sites, where the code passes automated contrast checks but the content still requires clinical vocabulary to interpret. A screen reader can pronounce “psychoeducation” cleanly. A visitor in acute anxiety may still not know what it means or whether it applies to them.

Infographic showing New Success Criteria in WCAG 2.2
New Success Criteria in WCAG 2.2

Typography, White Space, and the Scanning Economy

Visitors do not read mental health service pages. They scan them, and the layout either supports that scan or defeats it.

ODPHP’s Health Literacy Online sets a specific typography floor for consumer health content: body text should be at least 16 pixels, with sans serif fonts generally preferred for on-screen readability, though the underlying research on font choice remains inconclusive 6. Sixteen pixels is not a design preference. It is the size below which older adults, users with low vision, and users reading on mid-range phones begin to lose words. Practices that ship 13- or 14-pixel body copy to look more editorial are trading legibility for style, and the trade shows up in bounce.

White space carries the other half of the load. ODPHP’s guidance on avoiding clutter states plainly that clean, uncluttered pages are easier to read, and that white space helps mobile users avoid accidentally tapping the wrong place 5. On a service page for a partial hospitalization program, that translates into practical rules. Body paragraphs should sit at line heights around 1.5. Sections should be separated by generous vertical space rather than divider lines. Tap targets for phone numbers and intake buttons should have padding around them so a thumb landing slightly off-center still hits the intended element. CDC guidance reinforces the same layout logic: material should be easy to skim and scan with large font, sub-heads, bullets, and white space 8.

The scanning economy on a mental health site is unforgiving. A visitor arrives with narrowed attention, opens the page, and gives it a few seconds before deciding whether to continue. Sixteen-pixel type, honest line height, short paragraphs, and real white space keep that visitor on the page. Cramped columns, gray-on-gray body copy, and dense blocks push them back to the search results, where a competitor’s cleaner layout is waiting.

Data-Driven Website Design for Mental Health Practices

Leverage proven healthcare marketing strategies to build websites that convert local searches into patient inquiries while maintaining compliance and trust.

Optimize Your Website

Imagery, Stigma, and the Trust Question

Which Images Reduce Stigma and Which Reinforce It

The default imagery playbook for mental health sites has been consistent for a decade: soft-focus stock photos of a woman looking out a window, hands clasped on a knee, a therapist nodding across a couch. That imagery is easy to license and difficult to defend as an evidence-based choice.

An experimental study on stigma reduction tested how different image types performed at shifting attitudes toward mental illness. Illustrated narratives produced more anti-stigma effects than text-only narratives, and photographic narratives outperformed cartoon narratives for some outcomes 12. The finding cuts against two common defaults at once. Text-only service pages leave anti-stigma work on the table. Cartoon or heavily stylized illustrations, popular on newer mental health brands, underperform photographs for certain effects that matter when a first-time visitor is weighing whether the practice takes their situation seriously.

The operational read is narrower than “use real photos.” It means imagery on a service page should carry narrative content, not decoration. A photograph of a clinician mid-conversation with a patient, captioned with what that session actually involves, does more work than the same photograph floated as a hero image with no context. Illustrations can carry the same weight when they depict a specific scenario rather than an abstract mood. Generic serenity imagery, regardless of medium, is the weakest option the research supports.

Trust Signals: What the Research Does and Doesn’t Settle

Trust signals are the part of a mental health site owners most want a checklist for, and the part the research is least willing to hand over cleanly. A review of 49 papers on trust between patients and health websites found little consensus on the defining characteristics of trust in this context 13. The literature agrees trust matters and disagrees on what produces it.

That absence of consensus does not mean anything goes. It means the safe operating rules are the ones that overlap with the other layers already covered: accurate, actionable content 8, plain language that matches how visitors describe their own situation 9, and a design that meets published accessibility standards 1. Credentials, licenses, and clinician bios belong on the page because they are factual disclosures a visitor can verify, not because a study has quantified their conversion lift. Testimonials and reviews should be handled with the compliance rules that apply to a licensed clinical practice, which is a separate governance conversation. What the trust literature settles is that overclaiming a single “trust design” is not supported. What it leaves open is worth stating plainly on the page rather than papering over with badges.

Navigation and the Path to an Intake Action

Navigation on a mental health site has one job: get a visitor from wherever they land to the phone number or intake form without asking them to think. Everything else is secondary.

ODPHP’s Health Literacy Online lists organizing and simplifying navigation as a core step in designing usable health sites, alongside writing actionable content and displaying it clearly 3. A systematic review of digital mental health tools reached the same conclusion from the engagement side: ease of navigation, alongside content relevance and readability, materially affected whether adults with depression, anxiety, and somatoform disorders accepted and continued using the product 18. Navigation is not a wayfinding preference. It is a completion variable.

The operating rules follow from that:

  • A primary menu should carry no more than five to seven top-level items, named with words a visitor would use, not internal service codes. “Anxiety Treatment” beats “Cognitive Behavioral Services.”
  • The phone number should sit in the header on every page, tappable on mobile, with sufficient tap-target padding for a thumb landing off-center 5.
  • The primary call-to-action, whether a call or an intake form, should appear above the fold on service pages and repeat at the bottom of long content.
  • Breadcrumbs help visitors who arrive from search deep in the site orient themselves.
  • A single, persistent path to “Contact” or “Verify Insurance” outperforms three competing paths that split intent.

Every extra click between a distressed visitor and the intake action is a place the visit ends.

A Prioritization Matrix for a Redesign or Audit

Not every fix carries the same weight, and not every fix costs the same to ship. A useful matrix separates the four documented failure layers by effort and by expected impact on whether a visitor understands the page and completes an intake action.

  1. Readability rewrite is the highest-impact, lowest-technical-effort fix on the list. It requires a content audit against a target grade level and a substitution pass using CDC’s Everyday Words guidance 9, and it directly addresses the grade-level spread documented in the readability literature 15. Most practices can rewrite their top ten service pages before a developer touches the codebase.

  2. Navigation simplification sits close behind on impact and is a moderate build. Collapsing a bloated menu, standardizing the phone-number placement, and moving the primary call-to-action above the fold on service pages tracks with the ease-of-navigation findings in the digital mental health literature 18. This is design and template work, not a full rebuild.

  3. WCAG 2.2 conformance is high impact and higher effort because it touches code, templates, media, and forms. It also carries the legal exposure the DOJ has publicly named 2. Practices should scope this as a defined audit against version 2.2 with a prioritized defect log, not an open-ended project.

  4. Imagery and trust signals is the lowest-effort, most bounded fix. Replacing generic stock with narrative photographs or specific illustrations 12 and cleaning up credential disclosures can happen inside a single sprint.

Sequence the work in that order: rewrite, navigate, conform, then re-image.

Process: Testing With the People Who Will Use the Site

A mental health site cannot be evaluated by the team that built it. Every readability, accessibility, and navigation decision on the page has to hold up in front of visitors who resemble the ones the practice is trying to reach, and that check has to happen before launch, not after traffic exposes the defects.

An early usability study of a web-based patient information system for people with severe mental health problems concluded that service user evaluation matters most at the early stages of development, before design decisions harden into code 17. A systematic review of digital mental health tools reinforced the same finding from the acceptability side: ease of navigation, readability, and content relevance shaped whether adults with depression, anxiety, and somatoform disorders continued using a product 18. Testing is not a launch checkpoint. It is how those variables get measured.

The practical process is narrow. Recruit five to seven participants who match the practice’s actual patient profile, using community partners rather than current clients to avoid privacy conflicts. Give each participant three tasks: find a specific service, locate the phone number, and identify what to do next after reading a service page. Record where they hesitate, what language they misread, and where they abandon. Rewrite against those failures, then retest. That loop, run twice before launch and once per major content update, is the difference between a site the team believes works and one the audience can actually use.

Infographic showing Recommended Minimum Font Size for Web Readability
Recommended Minimum Font Size for Web Readability

Frequently Asked Questions

What reading grade level should a mental health website target?

The consumer health target sits in the 6th-to-8th-grade band, and CDC guidance treats that range as the working ceiling for material meant to be accurate, accessible, and actionable 8. Service pages, intake instructions, and insurance explanations should all be measured against that band using a standard readability tool at each revision, with CDC’s Everyday Words list supplying the plain-language substitutions 9.

Is WCAG 2.2 compliance legally required for a private mental health practice website?

The Department of Justice treats web accessibility as an ADA obligation for public-facing businesses and points to WCAG-aligned practices including contrast, text alternatives, captions, labels, keyboard access, error handling, zoom, and headings as the practical standard 2. WCAG 2.2 is the current version and added nine new success criteria across visual, mobility, hearing, and cognitive barriers 1. Level AA against 2.2 is the working target.

Should we use stock therapy photos or illustrations on service pages?

Neither by default. An experimental study on stigma reduction found that illustrated narratives outperformed text-only, and that photographic narratives beat cartoon narratives on some outcomes 12. The signal is that images should carry narrative content tied to a specific scenario, whether photograph or illustration. Generic serenity stock, regardless of medium, is the weakest option the research supports.

How do we test a mental health website with real users without violating privacy?

Recruit participants who match the practice’s patient profile through community partners, peer support organizations, or paid research panels rather than current or former clients. That separation avoids conflicts around treatment relationships and identifiable health information. Early usability research on this population found that service user evaluation matters most before design decisions harden into code 17. Five to seven participants per round is sufficient.

Which design fix should we prioritize first in an audit or redesign?

Readability. It is the highest-impact, lowest-technical-effort layer, and the grade-level spread documented in current mental health content shows how much room most sites have to close 15. Rewriting the top ten service pages against a target grade level using CDC’s plain-language guidance 9 typically ships before a developer touches the codebase. Navigation simplification, WCAG 2.2 conformance, and imagery follow in that order.

Do trust badges, credentials, and testimonials actually build patient trust?

A review of 49 studies on trust in health websites found little consensus on what actually defines or produces it 13. Credentials and licenses belong on the page as factual disclosures a visitor can verify, not as documented conversion levers. The safer bets are the elements that overlap with other layers: accurate and actionable content 8, plain language 9, and accessibility conformance 1.

References

  1. W3C WCAG 2.2 Now Available. https://www.access-board.gov/news/2023/11/27/w3c-wcag-2-2-now-available/
  2. Guidance on Web Accessibility and the ADA. https://www.ada.gov/resources/web-guidance/
  3. Health Literacy Online: A Guide to Writing and Designing Easy-to-Use Health Web Sites. https://health.gov/healthliteracyonline/2010/Web_Guide_Health_Lit_Online.pdf
  4. Health Literacy Online | odphp.health.gov. https://odphp.health.gov/healthliteracyonline
  5. Section 5.4 Use white space and avoid clutter – Health Literacy Online. https://odphp.health.gov/healthliteracyonline/design-easy-scanning/use-white-space-and-avoid-clutter
  6. Section 5.3 Use a readable font that’s at least 16 pixels – Health Literacy Online. https://odphp.health.gov/healthliteracyonline/design-easy-scanning/use-readable-font-thats-least-16-pixels
  7. Guidance & Tools | Health Literacy. https://www.cdc.gov/health-literacy/php/develop-materials/guidance-standards.html
  8. Develop & Test Materials | Health Literacy. https://www.cdc.gov/health-literacy/php/develop-materials/develop-test-materials.html
  9. Everyday Words for Public Health Communication. https://www.cdc.gov/ccindex/everydaywords/index.html
  10. Accessibility and Digital Mental Health: Considerations for More Accessible Digital Mental Health Interventions. https://www.ncbi.nlm.nih.gov/pmc/articles/PMC8521906/
  11. Barriers and Facilitation Measures Related to People With Mental Disorders When Using the Web: A Systematic Review. https://pubmed.ncbi.nlm.nih.gov/27282115/
  12. Reducing mental illness stigma: What types of images are most effective?. https://pubmed.ncbi.nlm.nih.gov/33866948/
  13. Trust between patients and health websites: a review of the literature and derived outcomes from empirical studies. https://pubmed.ncbi.nlm.nih.gov/22288026/?dopt=Abstract
  14. A Readability Analysis of Online Mental Health Resources. https://pubmed.ncbi.nlm.nih.gov/30299121/
  15. Readability of publicly available mental health information. https://pubmed.ncbi.nlm.nih.gov/36944285/
  16. Help or hinder? An assessment of the accessibility, usability, reliability and readability of disability funding website information for Australian mental health consumers. https://pubmed.ncbi.nlm.nih.gov/33051906/
  17. Usability evaluation of a web-based patient information system for individuals with severe mental health problems. https://pubmed.ncbi.nlm.nih.gov/20722811/
  18. The Acceptability and Usability of Digital Health Interventions for Adults With Depression, Anxiety, and Somatoform Disorders: Qualitative Systematic Review and Meta-Synthesis. https://www.ncbi.nlm.nih.gov/pmc/articles/PMC7381032/