Evaluate the color combinations used

DMPRoadmap / roadmap

DCC/UC3 collaboration for a data management planning tool

MIT License

104 stars 110 forks source link

Evaluate the color combinations used #127

Closed briri closed 7 years ago

briri commented 7 years ago

Re-assess color combinations for DMPRoadmap. Keep current DMPRoadmap logo. Address color contrast issues raised in accessibility testing.

Color contrast fixes from accessibility review:

White against orange in the logo passes color contrast guidelines for large text.
Combination of orange/white on rest of page doesn't pass for small text.
Combination of orange against gray ("signed in as [username]" doesn't pass either.
Use color contrast tool to evaluate any other color combinations. (http://www.webaxe.org/color-contrast-tools/

From pivotal ticket: https://www.pivotaltracker.com/story/show/131322529

briri commented 7 years ago

Just focus on non org-admin/super-admin pages for this first pass. Use the new scss files when possible

rhu001 commented 7 years ago

Iteration #1:

Put in DMP logo (white)
Put in dark green (darkened version of Dark green from the logo color palette for accessibility purposes - 36421a) for global nav area
Change global nav text to white (ffffff)
Add Dark green for header text (36421a)
Add Dark green border around white form field boxes (36421a) 6.Change entire background so that it is white instead of the current light gray.

We can revisit the color combinations and layout closer to release for further refinement.

stephaniesimms commented 7 years ago

per mtg w/ UX and @sjDCC on 21/22 Jun decided to choose a neutral/generic color for Roadmap code (dark gray proposed). this will help distinguish the shared open source codebase from each of the services based on it, and alleviate confusion when testing different instances. all may then color and style as they choose. can you please suggest a color @rhu001 ?

@briri - you can also try replacing the logo w/the one in roadmap docs. I'll add another version with white color adjustment.

rhu001 commented 7 years ago

@briri Try this charcoal gray color. (4f5253)

stephaniesimms commented 7 years ago

Closing this issue. Accessible color combos for roadmap (stage) and DMPTool (dev) implemented for now. DMPonline will handle color/styling independently. We can revisit closer to release for further refinement as noted above.