Freecodecamp: Update Map's Estimated Time Style

Created on 25 Dec 2017  路  8Comments  路  Source: freeCodeCamp/freeCodeCamp

Challenge Name

Any challenge showing the map

Issue Description

The estimated time is not accessible with the current color #bbbbbb; since it is also rather large and taking up some real estate, I'd propose making it darker #555555 to pass WCAG 2.0 AA. This will also allow it to be smaller and normal font style as it's not so light and hard to read at a small font size.

Proposed Style Code

.map-block-time {
    color: #555;
    font-weight: normal;
    font-size: 1.4rem;
}

Screenshot

Proposed update:
Estimated challenge time proposed design

help wanted UI a11y

All 8 comments

@virtual I think the font-size is okay and the color thing should be implemented according to WCAG 2.0 AA principles. #555555 looks good 馃槃.
If @QuincyLarson, @Bouncey, @BerkeleyTrue agrees with the change. I'll raise a PR for this.

@vkWeb Yes - I think that color works. Do you know much about color theory? We have different recommended shades on https://design-style-guide.freecodecamp.org/ but it looks like we may need to add a new shade of darker gray. Do you know which shade would be dark enough and would also jive with our other colors and shades there?

@QuincyLarson Thanks for the reference to your guide! It is a bit ironic but #555555 is actually also the color of the left-side navigation used in your style guide. :)

@QuincyLarson I don't have that much knowledge about color theory. But as far as accessibility concern I think #555555 will look better. We should add #555555 in the secondary color list of our design style guide.

@virtual Yes. That's true.

@vkWeb OK - great. Sounds like a plan. Can you make a pull request to update the style guide as well? https://github.com/freecodecamp/design-style-guide

@QuincyLarson I'm very excited. It'll be my first contribution to open source code base. I'll raise a PR within 2 days.

@vkWeb Awesome! I'm excited to help QA it :)

@QuincyLarson I have raised a Pull Request in the design-style-guide repository. I'll appreciate your feedback.

Was this page helpful?
0 / 5 - 0 ratings