Giters

lowlighter / matcha

🍵 Drop-in semantic styling library in pure CSS. Highly customizable and perfect for simple websites and prototyping web apps!

Home Page:https://matcha.mizu.sh

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Checkboxes can be confused for radio buttons

spartanatreyu opened this issue · comments

commented

Checkboxes currently show their checked status by drawing a black check over a dark-blue rounded box.

Screenshot:
current checkbox example

For users with poor vision, it's too easy for the checkboxes to be confused with radio buttons which will lead users to incorrectly assume that they can only select one of the possible options at the time.

Simulated screenshot with a 4px gaussian blur:

current checkbox example blurred

Proposed Solution:

  1. Remove border-radius to distinguish checkbox from radio button.
  2. Change stroke color to white

Proposed change screenshot:

proposed checkbox example

Proposed change simulated screenshot with a 4px gaussian blur:

proposed checkbox example blurred
commented

Hi !
Thanks for reporting this, indeed I can see why this can be confused

The stroke is supposed to be white, but I think it's probably caused because it inherits the default color font which is white for dark mode, but black in light mode. Will look into a patch

commented

A white stroke in both light and dark modes is probably going to be the best.