Skip to content

Accessibility

What is guaranteed

Meaningful text in every shipped preset meets WCAG AA contrast (4.5:1), enforced by an automated test over all ten presets. It is checked, not asserted in marketing copy — the test computes WCAG 2.x relative luminance and fails the build if a preset drops below the threshold.

Two deliberate exceptions

Disabled text. WCAG 1.4.3 explicitly exempts inactive controls, so SKINT does not hold disabled text to 4.5:1. If you are using disabled state to convey something a user genuinely needs to read, use a ThemedLabel with MessageType.Info instead.

Pastel Piss and Rab Mode. These two presets exist to demonstrate extremes — what the theming system will let you do, not what you should do. They are excluded from the contrast test by name, deliberately and on the record.

The other eight shipped presets all pass.

Your own themes are not checked

The contrast guarantee covers what SKINT ships. A theme a user builds in the designer can be as unreadable as they like, and SKINT will not stop them — the designer is a colour editor, not a linter.

If accessibility matters for the tool you are shipping, two practical steps:

  1. Judge themes in the Widget Gallery. It renders every control under the live theme, which catches what a colour picker cannot — disabled text that has vanished, a search highlight invisible against the panel.
  2. Ship a preset. Save a theme that meets contrast and distribute it with your tool, so users have a good starting point rather than whatever they last left the designer on.

Checking contrast yourself

The same calculation the test uses, if you want it in your own tooling:

static float RelativeLuminance(Color c)
{
    static float Channel(float v) =>
        v <= 0.04045f ? v / 12.92f : Mathf.Pow((v + 0.055f) / 1.055f, 2.4f);

    return 0.2126f * Channel(c.r) + 0.7152f * Channel(c.g) + 0.0722f * Channel(c.b);
}

static float ContrastRatio(Color a, Color b)
{
    float la = RelativeLuminance(a), lb = RelativeLuminance(b);
    float hi = Mathf.Max(la, lb), lo = Mathf.Min(la, lb);
    return (hi + 0.05f) / (lo + 0.05f);
}

AA is 4.5:1 for normal text and 3:1 for large text. AAA is 7:1 and 4.5:1.

Colour is not the only axis

Font size is themeable too, and a user can take content text down to 9pt. SKINT does not enforce a minimum, because an editor tool on a high-DPI display is a different case from body copy on a web page — but it is worth knowing the slider goes there.

Next