Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Color alphabet for lane connector #287

Open
originalfoo opened this issue Apr 19, 2019 · 6 comments
Open

Color alphabet for lane connector #287

originalfoo opened this issue Apr 19, 2019 · 6 comments
Assignees
Labels
Accessibility Color blindness, etc. discussion Contains debate on certain topics enhancement Improve existing feature LABS TM:PE LABS branch LANE ROUTING Feature: Lane arrows / connectors Overlays Overlays, data vis, etc. UI User interface updates Usability Make mod easier to use

Comments

@originalfoo
Copy link
Member

originalfoo commented Apr 19, 2019

Jotting down notes on research for new lane connector color alphabet.

The existing color alphabet consists of 48 colours as shown below:

colors

Research suggests a color alphabet should be 26 colors or less if there are no limits on which colors can be used.

As we are working with roads which are generally grey to black in color (and sometimes red or green for bus and bike lanes), we should avoid dark/deep colors, and also shades of grey.

lightness

Any reds and greens (and potentially blues & yellows which might become prevalent due to Network Skins 2) should be distinct from common road surface colors used in the game. As we have plans to apply special meaning to white in later updates, that color must be avoided.

Some standard color alphabets are shown below (note that several of the colors in each are not suitable for lane connectors):

color alphabet

I think we could potentially use A-P on the following alphabet:

alphabet

And some samples of colors used on transport maps around the world (note the lack of contrast between red, orange and yellow):

transit-line-colors-of-US-and-Canada

Sample of vivid colors that would work well on both light and dark road surfaces (credit: Massimo Vignelli):

BoroughHall

We should also consider color blindness, and prevalence of each type.

Ordering the colors based on color blindness prevalence would potentially allow us to offer accessibility features for color blind users:

  • For 100% coverage we'd be limited to yellow and blue
  • For 99.99% coverage we could add maroon, lavender, orange and pink
  • For 99% coverage we could add brown, "red" (more of a vibrant pink), beige, mint, green, cyan, teal, and magenta
  • For 95% coverage we could add olive, lime, apricot and purple

That would be a total of 18 colors, with options to reduce palette to subsets of those colors for accessibility purposes.

I still have some stuff to check, but should have an initial color alphabet ready within the next day or two.

@originalfoo originalfoo added enhancement Improve existing feature discussion Contains debate on certain topics Usability Make mod easier to use Accessibility Color blindness, etc. LABS TM:PE LABS branch UI User interface updates labels Apr 19, 2019
@originalfoo originalfoo added this to the 10.19 milestone Apr 19, 2019
@originalfoo
Copy link
Member Author

originalfoo commented Apr 19, 2019

This is derived from an alphabet by Sasha Trubetskoy who seems to be thinking along the same lines as myself:

palette

Note that whatever palette we decide on will need testing with and without daylight classic mod. I suspect yellow/orange colors will suffer with vanilla sun tint.

We could potentially snap colours to nearest flat or material counterparts to provide a more familiar palette to users: https://htmlcolorcodes.com/color-chart/

@originalfoo originalfoo self-assigned this Apr 19, 2019
@originalfoo originalfoo modified the milestones: 10.19, 10.20 Apr 20, 2019
@originalfoo
Copy link
Member Author

Quick progress update - taking much longer than expected.

I'm focusing on the central band of the image above, finding nicer colors to use, and then deriving a second shade of each of those colors whilst simultaneously testing for 8 types of color blindness.

I'm trying to avoid having 9 color palettes, although part of my brain is wondering if it would be better to do the opposite.

@originalfoo
Copy link
Member Author

I'm resorting to using HTML to test colors in order to get faster turnaround on iterations....

Does anyone have vanilla pavement and asphalt textures (I want to set html background image to those for testing colors on top of them).

@originalfoo
Copy link
Member Author

originalfoo commented May 6, 2019

slowly getting there...

swatches

Thanks to krzychu for the texture images :)

Edit: Also thanks to Clus and Boformer who provided info on how I can get the textures in future.

@originalfoo
Copy link
Member Author

Can now apply color blindness effects directly to the palette in browser:

cb

One important note from earlier information is that we will have to ensure bold colors to accommodate users with Blue Cone Monochromacy (Acrhomatomaly) which causes colors to be faded / less saturated.

toggle

I'm now working on tooling to allow colors to be toggled per type of color blindness (see above) and then it should just be a case of iterating the swatches to output C code for color palettes. Oh, and actually deciding on final colors which is probably going to take another day or so, but will endeavour to get it done today.

@originalfoo
Copy link
Member Author

Another note: Assuming we are using unlit shader, in-game color distortions (sun tint, LUT, day/night, etc) wont affect the color palette :)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Accessibility Color blindness, etc. discussion Contains debate on certain topics enhancement Improve existing feature LABS TM:PE LABS branch LANE ROUTING Feature: Lane arrows / connectors Overlays Overlays, data vis, etc. UI User interface updates Usability Make mod easier to use
Projects
None yet
Development

No branches or pull requests

1 participant