menu

SpecFM

A network of designers and developers making the best podcasts, blogs, and resources for designers and developers.

Channels
# All channels
view-forward
# General
view-forward
# Assemble
view-forward
# Design
view-forward
# Design Details
view-forward
# Design Systems
view-forward
# Developer Tea
view-forward
# Does Not Compute
view-forward
# Fragmented
view-forward
# Framework
view-forward
# Immutable
view-forward
# inspect
view-forward
# Jobs
view-forward
# Layout
view-forward
# Music
view-forward
# Orthogonal
view-forward
# Programming
view-forward
# Reactpodcast
view-forward
# Research
view-forward
# Runtime
view-forward
# show-n-tell
view-forward
# Specifics
view-forward
# Swift Unwrapped
view-forward
# Toolsday
view-forward
# Typography
view-forward
Team

Understanding color contrast

September 5, 2017 at 4:31pm

Understanding color contrast

September 5, 2017 at 4:31pm
Hey all, I’ve been really struggling with trying to understand color contrast so I attempted to build a tool that shows you what regions of the color picker are accessible and what ones aren’t. It will even display what the nearest set of accessible colors are. I would love to know what you all think of it! http://kevingutowski.github.io/color.html
Heres an example of how it works: Image

September 5, 2017 at 4:37pm
SO. DOPE. 🔥🔥🔥🔥🔥
like-fill
13
  • reply
  • like
Hah thanks a bunch Bryn! Glad you like it :D
  • reply
  • like
super cool tool. i referenced it a bunch while building my site. congrats on building it to where it is now 🎉
  • reply
  • like
Woah, thats awesome to hear Dario! I'm so glad it could be useful for you.
  • reply
  • like
Bookmarked! This is a pretty great tool, thanks for sharing
like-fill
2
  • reply
  • like

September 16, 2017 at 10:02pm
I use this for color contrast checking: http://webaim.org/resources/contrastchecker/
like-fill
2
  • reply
  • like

September 17, 2017 at 9:44pm
Nice, thats a cool one Hannah! I like how they show you the various levels of accessibility and let you know what passed or failed.
  • reply
  • like
I also like how you have the "lightness" slider to help make adjustments but its not quite clear to me what "lightness" means. Is it just increasing the R,G,B values or is it increasing the brightness value?
  • reply
  • like
Cool tool! I met a guy in my program today who is studying visual design but is colorblind. Would teams see it as an asset to have a member that was colorblind? Would this be even better than a tool?
  • reply
  • like
Even better, is anyone a colorblind designer that would like to chat?
  • reply
  • like
Nice! I'm sure having a member being colorblind would be fantastic to have! There are many types of colorblindness so various tools (like Stark) allow you to explore all of them. As for meeting specific contrast requirements, the only way to know is to use the formula defined by WCAG.
like-fill
1
  • reply
  • like

April 8, 2018 at 6:06pm
Hey all! I just took a design pass at this page I think it looks much better. Hopefully it is a bit clearer to use!
  • reply
  • like
  • reply
  • like

April 9, 2018 at 4:02pm
Very useful! Just shared out with our design team. I’m red-green colorblind if there’s anything I can help out with.
  • reply
  • like
This is beautiful! Thanks! Bookmarked.
  • reply
  • like
Thanks for the kind words! Let me know if there is anything else you would like to see for this tool.
  • reply
  • like

April 10, 2018 at 6:33pm
Thanks for sharing, ! I've been working with Stark in Sketch, but I love that I can use this no matter the design system I choose to work in. 💜
like-fill
1
  • reply
  • like
Totally going to use this as I'm going through a visual design update in my current project and I need to address low contrast issues
like-fill
2
  • reply
  • like

April 11, 2018 at 7:18am
Yay, glad to hear that you think this will be helpful! The end goal is to make this into a sketch plugin so it is a bit easier quickly use but a web version is still nice to have.
  • reply
  • like

April 26, 2018 at 9:57pm
Sketch plugin! :)
  • reply
  • like