# Tessli Collection — Accessible colour tools

## Use this research path

Use this research path to A colour system that communicates the intended brand while surviving contrast, visual-impairment, component-state, and page-level checks.

Tools for building colour systems, checking contrast, understanding visual-access needs, and evaluating interface accessibility.

- **Audience:** Designers and frontend teams defining or auditing interface colour systems.
- **Stages:** 3
- **Sources:** 10

## Staged decisions

### 1. Build the system

#### 1.1 Adobe Color

- **Role:** Adobe Color supports early palette exploration and basic accessibility checks.
- **Inspect:** Generate candidate palettes and scales with explicit accessibility constraints rather than choosing isolated swatches.
- **Decide:** Choose the tonal structure and semantic colour roles to prototype.
- **Source guide:** /resources/adobe-color
- **JSON:** /resources/adobe-color/profile.json
- **Markdown:** /resources/adobe-color/profile.md
- **Provider:** https://color.adobe.com
- **Access action:** Open the canonical provider URL; sign-in and other access requirements are not recorded. (https://color.adobe.com)

#### 1.2 Leonardo

- **Role:** Leonardo helps generate adaptive, contrast-aware colour systems.
- **Inspect:** Generate candidate palettes and scales with explicit accessibility constraints rather than choosing isolated swatches.
- **Decide:** Choose the tonal structure and semantic colour roles to prototype.
- **Source guide:** /resources/leonardo
- **JSON:** /resources/leonardo/profile.json
- **Markdown:** /resources/leonardo/profile.md
- **Provider:** https://leonardocolor.io
- **Access action:** Open the canonical provider URL; sign-in and other access requirements are not recorded. (https://leonardocolor.io)

#### 1.3 InclusiveColors

- **Role:** InclusiveColors creates WCAG-aware scales suitable for tokenized interfaces.
- **Inspect:** Generate candidate palettes and scales with explicit accessibility constraints rather than choosing isolated swatches.
- **Decide:** Choose the tonal structure and semantic colour roles to prototype.
- **Source guide:** /resources/inclusivecolors
- **JSON:** /resources/inclusivecolors/profile.json
- **Markdown:** /resources/inclusivecolors/profile.md
- **Provider:** https://www.inclusivecolors.com
- **Access action:** Open the canonical provider URL; sign-in and other access requirements are not recorded. (https://www.inclusivecolors.com)

### 2. Test human impact

#### 2.1 Who Can Use

- **Role:** Who Can Use translates contrast choices into human-impact context.
- **Inspect:** Inspect contrast ratios and how combinations affect people with different visual impairments.
- **Decide:** Decide which colour pairs and text treatments are safe for the intended content.
- **Source guide:** /resources/who-can-use
- **JSON:** /resources/who-can-use/profile.json
- **Markdown:** /resources/who-can-use/profile.md
- **Provider:** https://www.whocanuse.com
- **Access action:** Open the canonical provider URL; sign-in and other access requirements are not recorded. (https://www.whocanuse.com)

#### 2.2 WebAIM Contrast Checker

- **Role:** WebAIM Contrast Checker provides a focused standards-based foreground/background test.
- **Inspect:** Inspect contrast ratios and how combinations affect people with different visual impairments.
- **Decide:** Decide which colour pairs and text treatments are safe for the intended content.
- **Source guide:** /resources/webaim-contrast-checker
- **JSON:** /resources/webaim-contrast-checker/profile.json
- **Markdown:** /resources/webaim-contrast-checker/profile.md
- **Provider:** https://webaim.org/resources/contrastchecker
- **Access action:** Open the canonical provider URL; sign-in and other access requirements are not recorded. (https://webaim.org/resources/contrastchecker)

#### 2.3 Stark

- **Role:** Stark supports collaborative accessibility review across design and development tools.
- **Inspect:** Inspect contrast ratios and how combinations affect people with different visual impairments.
- **Decide:** Decide which colour pairs and text treatments are safe for the intended content.
- **Source guide:** /resources/stark
- **JSON:** /resources/stark/profile.json
- **Markdown:** /resources/stark/profile.md
- **Provider:** https://www.getstark.co
- **Access action:** Open the canonical provider URL; sign-in and other access requirements are not recorded. (https://www.getstark.co)

### 3. Verify in context

#### 3.1 Realtime Colors

- **Role:** Realtime Colors previews palette and typography choices in a page-like context.
- **Inspect:** Preview the system on interfaces, then run page- and component-level accessibility checks.
- **Decide:** Approve, revise, or reject the colour implementation based on contextual evidence.
- **Source guide:** /resources/realtime-colors
- **JSON:** /resources/realtime-colors/profile.json
- **Markdown:** /resources/realtime-colors/profile.md
- **Provider:** https://realtimecolors.com
- **Access action:** Open the canonical provider URL; sign-in and other access requirements are not recorded. (https://realtimecolors.com)

#### 3.2 Open Color

- **Role:** Open Color offers an interface-oriented open colour scale for comparison or adoption.
- **Inspect:** Preview the system on interfaces, then run page- and component-level accessibility checks.
- **Decide:** Approve, revise, or reject the colour implementation based on contextual evidence.
- **Source guide:** /resources/open-color
- **JSON:** /resources/open-color/profile.json
- **Markdown:** /resources/open-color/profile.md
- **Provider:** https://yeun.github.io/open-color
- **Access action:** Open the canonical provider URL; sign-in and other access requirements are not recorded. (https://yeun.github.io/open-color)

#### 3.3 Accessibility Insights

- **Role:** Accessibility Insights supports structured automated and guided implementation checks.
- **Inspect:** Preview the system on interfaces, then run page- and component-level accessibility checks.
- **Decide:** Approve, revise, or reject the colour implementation based on contextual evidence.
- **Source guide:** /resources/accessibility-insights
- **JSON:** /resources/accessibility-insights/profile.json
- **Markdown:** /resources/accessibility-insights/profile.md
- **Provider:** https://accessibilityinsights.io
- **Access action:** Open the canonical provider URL; sign-in and other access requirements are not recorded. (https://accessibilityinsights.io)

#### 3.4 WAVE

- **Role:** WAVE provides a second page-level evaluation lens for issues automation and visual inspection reveal.
- **Inspect:** Preview the system on interfaces, then run page- and component-level accessibility checks.
- **Decide:** Approve, revise, or reject the colour implementation based on contextual evidence.
- **Source guide:** /resources/wave
- **JSON:** /resources/wave/profile.json
- **Markdown:** /resources/wave/profile.md
- **Provider:** https://wave.webaim.org
- **Access action:** Open the canonical provider URL; sign-in and other access requirements are not recorded. (https://wave.webaim.org)

## Interpretation boundaries

- Collection order is editorial guidance and does not represent popularity, sponsorship, or universal quality.
- Repository intelligence is not live-provider verification.
- Revalidate provider access, pricing, licensing, terms, availability, and time-sensitive claims.
- No browser-local Board, Saved, account, cookie, or credential data is included.