Heliodore Brand manual · v1.0 EN PDF Download kit

16 · Reading well when it is hardest

Legibility

Size, line width, contrast and touch area. Here you can adjust and see the thresholds that Heliodore sets for its screens.

Reading lab

The sample text is arrival directions for a patient (fictional). Change the values and watch when it stops being comfortable.

How to get to your appointment

We expect you on Tuesday, November 3 at 9:00 a.m. at Example Clinic, 2nd floor. Come in through the main door and let reception know. If you arrive early, you can wait in the first-floor lounge. If you need to change the time, reply to this message and we will find another.

    Heliodore thresholds

    MeasureThresholdWhy
    Base text17 pxComfortable reading at desk and phone distance
    Minimum text15 pxOnly notes and footers; never clinical or appointment information
    Line height1.5 to 1.7WCAG 1.4.12 requires tolerating 1.5 without loss of content
    Line width45 to 75 charactersLonger, and the eye loses the line
    Text contrast4.5:1 (AA) · 7:1 for main contentScreens with glare and tired eyes
    Component contrast3:1Field borders, icons with meaning, focus
    Zoomup to 200%Without losing content or scrolling in two directions (WCAG 1.4.4)
    Touch target44 × 44 pxStricter than the WCAG 2.2 AA minimum (24 px); it is the house rule
    Touch spacing8 pxAvoids tapping the neighboring button

    Touch targets

    Change the button size. At 44 px or more it passes the house rule; between 24 and 43 it meets the WCAG minimum but not Heliodore’s.

    High-contrast mode

    A separate mode for those who need it: it is turned on from settings, not by default.

    Today’s appointment

    9:00 a.m. · Example Patient A

    Open record
    Normal: Solar as the action and soft borders.
    Today’s appointment

    9:00 a.m. · Example Patient A

    Open record
    High contrast: black, white, 2 px borders and a single accent.
    Background and text
    Pure black and pure white: 21:1.
    Borders
    2 px solid on all fields and buttons.
    Accent
    A single yellow (#ffd23f) for focus and the main action.
    Icons
    Always with a visible label.
    Respected
    The system’s prefers-contrast: more, in addition to the manual setting.