Color scheme is not color blind friendly

[WesternIcelander]

I2C and UART look the same to me.

[NealEhardt]

There are 7 categories in the legend. Perhaps this conservative 7-color palette adapted for color blindness should be used.

More here http://mkweb.bcgsc.ca/colorblind/

[Gadgetoid]

@NealEhardt thank you- I've mocked up the left-hand pinout in those colours. @Siggi88 are you able to descern each pin group?

[WesternIcelander]

@Gadgetoid The UART pins are still too similar to I2C pins. Although it's easier to discern now, the UART pins look like a slightly darker variant of the same colour, it might not be as easy for those with a more severe colour vision deficiency than me, or could still cause confusion for some.

[Gadgetoid]

I need to get around to actually implementing this. Aside from the accessibility benefits, I quite like these colours.

Not quite sure what to do about UART/i2c.

[Gadgetoid]

I've just compounded this problem by adding another colour.

After doing some cursory research it doesn't seem like something that's readily easy to solve and there doesn't appear to be any combination of colours this varied that would suit all cases- least of all none of this helps with total loss of vision/colour vision.

However, the colours on the header aren't essential and I have enhanced accessibility by adding the information that the colour was encoding into the text. This also provides an additional accessibility vector for more severe cases of visual loss.

Chiefly pins are now labelled "I2C1", "UART", "SPI0", "PCM" and "EEPROM" so those that can't disambiguate or see the colours have more than "TXD" "RXD" "SCL" to rely on when figuring them out.

[NealEhardt]

If you are able to convey the color information by text, that should be great for accessibility.

Colors are helpful for me, so I'd like to keep them too 😁 The Martin Krzywinski site I referenced earlier now has 8-color and 12-color palettes for color blindness. Perhaps one of those will work for you.

Thanks for maintaining this useful project.

[Gadgetoid]

I realise this might be highly controversial among fully colour sighted users who are easily aesthetically offended.... but... haha sucks to be them:

And with all colour stripped out, the shape-keying demonstrates that it's still possible to identify pin-groupings almost at a glance.

I know this isn't perfect, but it helps. Dropping the little dot from the middle of each pin also reduces the overall visual confusion of the pinout. The dot can be borrowed for pin 1 since it's already a convention and since we've overriden what "shape" means it's no longer appropriate for pin 1 to be square.

[lurch]

I'm not entirely convinced by the mini pacmen :-/ Perhaps they might be misinterpreted to imply directionality (i.e. input vs output) ? I think as long as clicking on e.g. https://pinout.xyz/pinout/spi shows the relevant pins highlighted, then that might be enough for monochrome usages? I think it looks okay with the removal of the dots from the middle of the pins, but I'd vote for keeping pin1 as the only square pin, since it's a useful indicator for those that are aware of it. Also, the ground pins seem to be "invisible" in the mockup above, which looks a bit odd.

All IMVHO of course!

[NealEhardt]

Very nice! I expect this will improve accessibility for most visitors.

I agree with @lurch that there's room for improvement in shape choice. For inspiration, here are the symbols that LibreOffice Calc uses to differentiate multiple datasets in a scatterplot.

[Gadgetoid]

Ah @NealEhardt you're a genuius. That table has set off a little lightbulb in my dark, dusty, mostly empty, musty desolate skull... casting the silhouette of an idea against the few remaining neurons, that cower helplessly in the corner.

The idea says "Font Awesome" - https://fontawesome.com/icons?d=gallery&c=shapes&m=free

But they're rather short on useful shapes. There must be a good shape font out there, though.

The original suggestion from twitter said "shapes" but my response was loosely "nah, shapes r hard I do this instead", ignoring the fact that I've done shapes before using a vector font for a web app.

Some possibilities from icomoon:

Alternatively there are a few shapes from your suggestion that should be relatively trivial to recreate in CSS:

1. A - Square (obviously, haha)
2. B - Diamond (it's just a square with a rotate(45deg) applied)
3. H - Hourglass (CSS borders with equal width, left and right border transparent)
4. I - Circle (all the border-radius!)
5. J or L - Plus sign (ignoring the fact it's just a +, it can be done with CSS pseudo elements)
6. K - Rotated plus... uh multiply... (+ with rotate(45deg) applied)
7. M - Star (can be done like a plus sign, only harder)

I think from gathering information from various sources people are keen on:

1. Symmetry- guess this implies more distinct/recognisable detail
2. A bigger visual difference between icons

And the above 7 fit this bill quite nicely.

The right answer is to probably art up the icons nicely in Illustrator (as vectors) and bake them into a web font to avoid any CSS funny business.

[Gordontgopher]

Phil, because you can never have too many choices (yeah right!) I'll leave this here :http://materialdesignicons.com/tag/community there are of course a load more but not sure of the licencing on the non-community ones. Keep up the good work!

[Gadgetoid]

Proposal: All the pins are now SPARKLES!!!

(ﾉ◕ヮ◕)ﾉ✲ﾟ｡⋆

[Gordontgopher]

If you could get around confusion with ground there's always G for GPIO, S for SPI, 5 for 5v although 3 for 3.3v and 0 for ground would be a bit of a fudge!

[lurch]

For some reason this conversation is starting to remind me of https://en.wikipedia.org/wiki/Mastermind_(board_game) :laughing: