WCAG Guidelines¶
All KMG applications should conform to WCAG 2.1 Level AA as a minimum standard.
Four Principles (POUR)¶
1. Perceivable¶
- Provide text alternatives for non-text content (images, icons)
- Provide captions for multimedia
- Content should be adaptable to different presentations
- Make it easier to see and hear content
2. Operable¶
- All functionality available via keyboard
- Give users enough time to read and use content
- Do not design content that causes seizures
- Help users navigate and find content
3. Understandable¶
- Text should be readable and understandable
- Content should appear and operate in predictable ways
- Help users avoid and correct mistakes
4. Robust¶
- Maximize compatibility with current and future tools
- Use valid, semantic HTML
Color Contrast¶
Minimum contrast ratios (WCAG AA):
| Text Type | Minimum Ratio |
|---|---|
| Normal text (< 18px) | 4.5:1 |
| Large text (>= 18px or 14px bold) | 3:1 |
| UI components and graphics | 3:1 |
KMG Colors Contrast Check¶
| Combination | Ratio | Pass? |
|---|---|---|
| Dark (#344767) on White (#fff) | 8.3:1 | AA/AAA |
| Primary (#5e72e4) on White (#fff) | 3.9:1 | Large text only |
| Secondary (#67748e) on White (#fff) | 4.6:1 | AA |
| Danger (#f5365c) on White (#fff) | 3.6:1 | Large text only |
Quick Checklist¶
- [ ] All images have
altattributes - [ ] All form inputs have associated
<label>elements - [ ] Color is not the only means of conveying information
- [ ] Focus order is logical and visible
- [ ] Page has a descriptive
<title> - [ ] Headings are used in proper hierarchy (h1 > h2 > h3)
- [ ] Links are descriptive (no "click here")
- [ ] ARIA landmarks are used appropriately