Commitment to access: LearnPack follows the Web Content Accessibility Guidelines (WCAG). High contrast, readable typography, descriptive alt text, and full keyboard support are core to the experience. ♿
Accessibility in LearnPack
When discussing accessibility, it is important to reference web standards such as the Web Content Accessibility Guidelines (WCAG), which provide good practices for making web content understandable for everyone, regardless of the user agent. LearnPack considers these guidelines and continuously strives to improve the user experience, making it easier to understand.Colors and contrast
The primary text color in LearnPack is black on a white background. This yields a contrast ratio of 21:1, which meets WCAG AA and WCAG AAA for normal text.- Verify the contrast here: LearnPack contrast.
Font sizes and readability
h3, another 4 px for h2, and 3 px more for h1. Lesson content is written in Markdown and converted to HTML, so images include alt text by design.
Additional practices for readability:
- No justification: avoids irregular spacing.
- Avoid excessive uppercase: reduces eye strain.
- Paragraph spacing: ~1.5×–2× line height between paragraphs for comfortable scanning.
Keyboard navigation and key commands
To make LearnPack easier to use without a mouse, key bindings enable complete keyboard control:Arrow Up/Arrow Down: scroll the page.Ctrl+Enter: execute the code you wrote.Ctrl+Shift+Enter: run the exercise’s tests and view results.Ctrl+Right Arrow: go to the next exercise.Ctrl+Left Arrow: return to the previous exercise.Ctrl+Alt+Enter: toggle the AI tutor if you are logged in.
Tip: Use keyboard shortcuts together with clear headings and alt text to move quickly, test often, and keep your hands on the keyboard. ⚡
Accessibility at a glance
| Area | What LearnPack provides | Why it helps |
|---|---|---|
| Contrast | Black on white, 21:1 ratio | Meets WCAG AA and AAA for normal text |
| Typography | Base 16 px body, larger headings | Readable hierarchy for long-form lessons |
| Images | Markdown-to-HTML with alt text | Non-text content is understandable |
| Keyboard | Shortcuts for run, test, navigate, tutor | Full control without a mouse |
Outcome: consistent readability, inclusive navigation, and accessible media make learning smoother for everyone.