ComfortKit

ComfortKit

A reading-comfort toolbar for your website. One floating button, and behind it 26 adjustments and 9 one-click presets — in 33 languages.

– 26 — individual comfort settings
– 9 — one-click presets
– 33 — fully translated languages
– 0 — lines of code to write

A reading-comfort toolbar for websites — one floating button, 26 settings and 9 one-click presets behind it, in 33 languages.

ComfortKit places a small round button in the corner of your site. When a visitor taps it, a panel opens where they can tune the page to suit themselves: larger text, stronger contrast, read-aloud, reading aids and much more. There is nothing to program — you configure everything by clicking through the Blocs Inspector panel, and from then on it simply works.

Who is this for?

– Your visitors — anyone for whom the default version of a page is harder work than it needs to be. Small type, thin contrast, busy layouts, long articles. That covers readers with low vision, dyslexia or colour blindness, older visitors, and equally the person squinting at their phone in bright sunlight at the end of a long day.
– You — a visitor who can read your page comfortably stays on it longer. And offering the choice at all says something about how you treat the people who come to your site.

What ComfortKit is — and what it isn’t. ComfortKit is a comfort layer that sits on top of your site and lets each visitor adjust it to their own preference. It is not a replacement for building the page well in the first place: meaningful headings, image descriptions, sensible colour contrast and keyboard-friendly navigation. Treat it as something you add on top of good foundations, not instead of them.

One-click presets

Your visitors don’t need to understand the details. They pick a preset and the toolbar switches on everything that goes with it. There are nine, and you can show or hide each one individually:

– Visually impaired — 140% text size + high contrast + readable typeface
– Reading aid — reading mode + readable typeface + 120% text size
– Dyslexia — dyslexia-friendly typeface, wider line and letter spacing, left-aligned text
– Larger view — big cursor + 120% text size
– ADHD — reading mask (focuses on one band at a time) + animations stopped
– Learning — reading mask + readable typeface + wider line and letter spacing
– Senior — 140% text, readable typeface, wide line spacing, big cursor, highlighted links
– Epilepsy mode — all animation stops + reduced colour saturation
– Colour blind — colour-blindness filter + highlighted links + boosted saturation

Clicking the same preset again turns it back off — nobody has to hunt for a way to undo it.

The 26 individual settings

Text and readability

– Text size — scales the whole page up in steps, proportionally, so the layout doesn’t fall apart.
– Line height — more breathing room between lines.
– Letter spacing — looser spacing between characters.
– Dyslexia font — switches to a typeface designed specifically for dyslexic readers.
– Readable font — a plain, clean typeface instead of a decorative one.
– Align left — removes justified text, which many people find harder to read.
– Uppercase — displays everything in capitals.
– Highlight headings — gives headings a coloured background and border so the structure of the page becomes obvious.

Contrast and colour

– High contrast — dark background, light text.
– Light contrast — the reverse: light background, strong black text.
– Invert colours — flips every colour on the page.
– Grayscale — removes colour entirely.
– Colour-blindness filter — three separate modes: protanopia (red), deuteranopia (green), tritanopia (blue).
– Saturation — muted or intensified colours, in two levels.

These never fight each other: switching one colour mode on automatically switches the others off. You can also define exceptions — your logo, for instance, can be left in its original colours.

Navigation and control

– Focus highlight — when moving through the page with the Tab key, the current element is clearly outlined. A short hint appears the first time.
– Big cursor — a substantially larger mouse pointer.
– Highlight links — links get a bold background and underline.
– Stop animations — all movement, fading and motion effects come to a halt.
– Virtual keyboard — an on-screen keyboard for filling in forms with the mouse. It has per-language layouts, accented characters, a symbol layer and Shift. On touch devices it switches itself off, since those already have a native keyboard.

Content and read-aloud

– Reading mask — dims the page and leaves a clear horizontal band at the height of the cursor.
– Reading ruler — a coloured bar follows the pointer so the reader doesn’t lose their line. Height and colour are adjustable.
– Hide images — turns images off so nothing competes for attention.
– Reading mode — pulls the substance out of the page (headings, paragraphs, lists, images) and presents it on a clean, distraction-free surface. Menus, footers and sidebars are left out automatically.
– Read aloud — once enabled, whatever the visitor clicks gets read out.
– Read whole page — works through the entire content, paragraph by paragraph.
– Focus reading — bolds the beginning of every word. Many people find it helps them skim faster.

Read-aloud automatically picks the best available voice for the chosen language — it prefers the more natural, neural voices and avoids the robotic ones — and highlights the passage currently being spoken, so it’s easy to follow along.

Languages

The panel speaks 33 languages, fully translated: English, Hungarian, German, French, Spanish, Italian, Portuguese, Dutch, Polish, Russian, Ukrainian, Czech, Slovak, Romanian, Bulgarian, Croatian, Serbian, Greek, Turkish, Swedish, Danish, Finnish, Norwegian, Japanese, Chinese, Korean, Arabic, Hebrew, Hindi, Thai, Vietnamese, Indonesian and Persian.

– Language picker with flags and a search box (flags can be hidden).
– For right-to-left languages (Arabic, Hebrew, Persian) the panel flips automatically.
– Automatic language detection based on the visitor’s browser.
– You can narrow the list down to just the languages you want to offer.

What you configure in the editor

– Button — position (any of the four corners), size (S/M/L), corner rounding, background and icon colour, custom SVG icon, stacking order, distance from the edge, and the option to hide it on mobile.
– Panel — background, text colour, accent colour, button colours, border colour, corner rounding, list or grid layout, and either the default title or one of your own.
– Fine-grained colour control — the setting buttons, the preset buttons and the small toggles each have separate background and text colours for their normal and active states. The link highlight, reading ruler, mask opacity, heading highlight, reading mode and read-aloud highlight colours are all controlled independently.
– Settings on/off — all 26 settings and all 9 presets can be toggled individually. Anything you don’t need simply doesn’t appear.
– Behaviour — Alt + U keyboard shortcut, close on Esc, close when clicking outside the panel, remembering the visitor’s choices (permanently or just for the session), a custom storage key, and letting the visitor hide the widget entirely.
– Content — you can specify which part of the page is the main content, what to leave out, and link to a statement page of your own.

Worth knowing

– The widget runs inside its own isolated container (Shadow DOM), so your site’s styles can’t break it — and it can’t break your site.
– You can ask for the full panel to render live inside the editor, so you don’t need to export just to see how it looks.
– It includes a Safari-specific fix so that Tab-key navigation behaves correctly there too.