> ## Documentation Index
> Fetch the complete documentation index at: https://knowledge.komo.tech/llms.txt
> Use this file to discover all available pages before exploring further.

# Designing Accessible Sites: Images, Colors, Contrast, and Font Best Practices

> Learn visual design best practices for creating inclusive and accessible Engagement Hubs with Komo Engagement Engine

## Why Accessibility in Design Matters

The visual design of your Komo Engagement Hub plays a huge role in how inclusive and usable your experience is. Poor color contrast, hard-to-read fonts, or relying solely on visuals can make it difficult—or impossible—for some users to engage with your content. This article gives you practical, platform-aligned tips for designing with accessibility in mind—without sacrificing aesthetics or brand consistency.

## Images and Alternative Text

Images can make your Komo Engagement Hub more engaging—but they should never become a barrier. Some users rely on screen readers to understand what's on the page, so images must be used thoughtfully.

### **Best Practices**

* **Use alt text for meaningful images** - If an image conveys information (e.g. a prize, sponsor logo, or product), add clear alternative text describing it
* **Skip alt text for decorative images** - If the image is purely visual (e.g. background confetti or design flourishes), leave the alt text blank so screen readers can skip over it
* **Don't put important text inside images** - Text baked into an image can't be read by screen readers and often won't resize well on smaller screens. Use real text wherever possible

<Tip>
  When uploading media to your site, always ask: **Would someone who can't see this image still get the message?**
</Tip>

## Choosing Accessible Colors

Color can enhance your experience—but it shouldn't limit who can enjoy it.

### Best Practices

* **Maintain strong contrast** - Aim for at least a 4.5:1 contrast ratio between foreground text and background
* **Don't rely on color alone** - Always pair color cues (e.g. red for incorrect) with text or icons
* **Test your palette** - Use tools like Colors Contrast Checker or WebAIM to validate your choices

## Fonts that Work for Everyone

Fonts shouldn't get in the way of understanding your message.

### Best Practices

* **Use legible, sans-serif fonts** - Avoid thin or decorative typefaces for body text
* **Avoid all caps** in long stretches—use them sparingly for emphasis

## Design Pitfalls to Avoid

Avoid these common mistakes:

| Mistake                                  | Why It's a Problem                         |
| ---------------------------------------- | ------------------------------------------ |
| Using pastel text on a white background  | Low contrast = unreadable for many users   |
| Relying on hover states only             | Not visible for keyboard users or mobile   |
| Using blinking or fast-animating visuals | Can trigger motion sensitivity or seizures |
| Hiding key text in images                | Screen readers can't access it             |

<Check>
  ## Quick Checks Before You Publish

  * Can all text be read easily in daylight?
  * Do links and buttons stand out clearly?
  * Have you avoided color-only cues?
  * Have you tested with one of the tools below?
</Check>

## Tools We Recommend

* [WebAIM Contrast Checker](https://webaim.org/resources/contrastchecker/)
* [Google Lighthouse](https://developer.chrome.com/docs/lighthouse/overview)
* [Color Oracle](https://colororacle.org/) – Simulate colorblindness
* [NoCoffee Vision Simulator](https://chromewebstore.google.com/detail/web-disability-simulator/olioanlbgbpmdlgjnnampnnlohigkjla?hl=en) (Chrome extension) – See how your site might look to users with vision impairments

## Want a Design Review?

Send a link to your in-progress experience to [support@komo.tech](mailto:support@komo.tech) and we'll give you quick feedback to improve accessibility before launch.