Documentation
Everything you need to install, configure, and master Clariti.
Installation
- Download
clariti.zipfrom your Envato purchases - Go to Plugins > Add New > Upload Plugin
- Choose the zip file and click Install Now
- Click Activate Plugin
License Activation
Navigate to Clariti > License and enter your Envato purchase code. The plugin verifies your code and unlocks all 18 modules.
Without activation, the accessibility widget will not appear on your site.
Quick Start
- Go to Clariti > Modules
- Toggle which modules you want to offer visitors
- Ensure "Enable Widget" is checked
- Visit your site — the eye-icon button appears automatically
Global Settings
| Setting | Description |
|---|---|
Enable Widget | Master on/off switch |
Hide on Mobile | Hide widget on screens under 768px |
All 18 Modules
| Module | Type | Category | WCAG |
|---|---|---|---|
| Font Size | Range | Text | 1.4.4 |
| Text Spacing | Range | Text | 1.4.12 |
| Dyslexia Font | Toggle | Text | 3.1.5 |
| Readable Font | Toggle | Text | 1.4.8 |
| Contrast Mode | Select | Visual | 1.4.3 |
| Color Blind Mode | Select | Visual | 1.4.1 |
| Desaturate | Toggle | Visual | 1.4.1 |
| Dark Mode | Toggle | Visual | 1.4.8 |
| Monochrome | Select | Visual | 1.4.1 |
| Big Cursor | Toggle | Navigation | 2.4.7 |
| Highlight Links | Toggle | Navigation | 2.4.4 |
| Focus Mode | Toggle | Navigation | 1.4.8 |
| Reading Line | Toggle | Reading | 1.3.2 |
| Reading Mask | Toggle | Reading | 1.3.2 |
| Page Structure | Toggle | Reading | 2.4.10 |
| Reading Guide | Toggle | Reading | 1.3.2 |
| Pause Animations | Toggle | Media | 2.3.3 |
| Hide Images | Toggle | Media | 1.1.1 |
Appearance Settings
Customize under Clariti > Appearance: Position (4 options), Brand Color, Widget Size, Z-Index, Custom CSS.
Custom CSS
#cw-btn { width: 60px !important; height: 60px !important; }
Troubleshooting
| Issue | Solution |
|---|---|
| Widget not showing | Check license active, Enable Widget on, clear cache |
| Theme conflict | Adjust z-index in Appearance |
FAQ
Multiple sites? — One license per site.
Performance? — Under 5KB, zero impact.
GDPR? — No cookies, sessionStorage only.
WCAG 2.1 Checklist
| Criteria | Module |
|---|---|
| 1.4.3 Contrast | Contrast Mode |
| 1.4.4 Resize Text | Font Size |
| 1.4.12 Text Spacing | Text Spacing |
| 2.3.3 Animation | Pause Animations |
| 3.1.5 Reading Level | Dyslexia Font |
Built with love by Dipto Design · Get Support