Forum Discussion

RobertCarr-87f0's avatar
RobertCarr-87f0
Community Member
10 months ago

Focus state on buttons and colour contrast issues - accessibility

Hello,

I am making a course using Rise 360 and I am using the Rise theme, I'm able to choose a colour for the theme, but I can only choose a "background colour", which is also applied to buttons. My problem, is that when I get to my quiz, there is a submit button for each question but it is impossible to see the focus state on that button because to pick a colour that has enough contrast with the white text, there isn't going to be enough contrast for the blue focus state.

What can I do to resolve this issue?

Rise 360
  • Crystal-Horn's avatar
    Crystal-Horn
    Staff
    9 months ago

    Hi there, Robert. I see what you're saying - the hover state of the quiz submit button is too light to be a background for white text.

    I'm sharing this behavior with my team so we can work on a better experience here. Thanks for bringing it up!

  • Crystal-Horn's avatar
    Crystal-Horn
    Staff
    9 months ago

    Hi again, Robert! Well, we sure do have a fast fix for you!

    We've removed the hover state from the submit button as well as from the Start Quiz button on the quiz start page.

    Now, the button will only use the theme color, and button text will automatically adjust contrast to light or dark, depending on the theme color. I hope that helps!

  • RobertCarr-87f0's avatar
    RobertCarr-87f0
    Community Member
    8 months ago

    Hello, thanks for showing this, but my problem was specifically with using the keyboard, when you use the tab key to move through content, there is a blue box that shows up and moves though the page. For most items, it works fine and is easy to see, but with these submit buttons, it is a problem.

    I was able to find a colour that had sufficient contrast with the white background, and the blue focus state, though it doesn't match our branding it does meet the contrast requirements. 

Related Content