Skip to content

Light theme: the hero slider's and the quickstart link's focus rings are 2.26:1 #961

Open

Description

@cemililik

On the light theme three controls draw their focus ring in --ember-bright (#fb923c), which is 2.26:1 on white, under the 3:1 a focus indicator needs (WCAG 2.2 SC 1.4.11), so a keyboard user can lose track of focus:

  • the home page's hero slider dots (.hero-slider-dot:focus-visible) and arrows (.hero-slider-arrow:focus-visible);
  • the "open the wizard" link on quickstart.html (.link-cta:focus-visible), whose text colour (rgb(250, 134, 46) on white, about 2.4:1) is also under the 4.5:1 body text needs.

Measured in Chrome with data-theme="light". The browser wizard had the same problem on its fields, sliders and section headers; #954 switched those to --ember-deep (#c2410c, 5.18:1 on white) under [data-theme="light"].

Acceptance criteria

  • Under [data-theme="light"] the three focus rings have at least 3:1 against their background; --ember-deep gives 5.18:1 on white.
  • The .link-cta text has at least 4.5:1 on the light theme.
  • The dark theme keeps its current colours.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    area: siteCode area: sitebugSomething isn't workingseverity: lowMinor defect, inaccuracy or rough edge

    Type

    No type

    Projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions