p5.js-website icon indicating copy to clipboard operation
p5.js-website copied to clipboard

Published 20 hours ago • verified publisher icon processing

Design of checkboxes in monochrome mode - proposal

Open xbarbie opened this issue 4 months ago • 2 comments

Current checkboxes in accessibility menu look like circles, that do not clearly reflect their state in monochrome mode. They are differentiated only by color, which is acceptable in color mode, but in monochrome they're a little confusing: monochrome_checkboxes_current

I propose to use some check marks to make them more clear. For example, I tested it by modifying the SVGs in HTML like this:

<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="m 16.371092,6.6210937 c 0.513245,0.5203285 0.507123,1.3583198 -0.01367,1.8710938 L 9.8535158,14.896484 c -0.5147559,0.506589 -1.3407128,0.506589 -1.8554687,0 L 3.6425783,10.607422 C 3.1217848,10.094649 3.1156616,9.2566574 3.6289063,8.7363283 4.1416797,8.2155349 4.9796709,8.2094117 5.5,8.7226563 L 8.9257813,12.097656 14.5,6.6074219 c 0.519236,-0.5121001 1.35949,-0.5058647 1.871092,0.013672 z M 10,20 C 15.5228,20 20,15.5228 20,10 20,4.47715 15.5228,0 10,0 4.47715,0 0,4.47715 0,10 0,15.5228 4.47715,20 10,20 Z" fill="currentColor"></path></svg>

The result: monochrome_checkboxes_proposal

xbarbie avatar Oct 01 '24 18:10 xbarbie