Date Picker: Update "today" marker and color contrast for better accessibility #10206

Merged
merged 1 commit into from Dec 23, 2016

Projects

None yet

6 participants

@iamtakashi
Member
iamtakashi commented Dec 21, 2016 edited

Raised by @nickmomrik

The red/orange color to highlight the current day always makes me double-take, thinking I’ve missed today. … That type of color is typically for an alert, error, or action required.

I’d agree and suggest to update it to a little more clearer highlight. There seems to be a design pattern that indicates “current” — light text on darker background.

highlight

By following this pattern, this is my suggestion:

current-date-before-after

For hover state:

current-date-hover-before-after

/cc @folletto , @mtias

@folletto
Member

I think it's an excellent change. We could even use a darker gray like $gray-dark, to fix also accessibility at the same time.

@iamtakashi
Member

Thanks for your feedback, @folletto. +1 to the idea of fixing the contrast issue for better accessibility.

Here is an experiment with different greys:

current-date-experiment

I personally think $gray-darkis a bit too dark with the surroundings. darken( $gray, 20% ) looks fine and it has a sufficient contrast. What do you think?

@folletto
Member

I'd use the higher contrast one personally, but if the other one passes AAA accessibility guidelines (I haven't checked) then I'm ok if you've a preference for it! 👍

@mtias
Member
mtias commented Dec 21, 2016

High contrast seems good since we also want to update the gray numbers. It may be a good chance to do both?

@iamtakashi
Member

I've added darken( $gray, 30% ) option with test results for AAA.

current-date-experiment2

@folletto Should we aim to pass AAA that requires even higher contrast? Wouldn't AA be good enough?

@mtias Which one did you mean by "high contrast"? I'd like to see $gray to be updated to pass at least AA with white to have a better default soon. If that can happen soonish, what about just using $gray? Is this what you're thinking? Or shall we go for one of the darker greys that passes AA or AAA since that can take time?

Which one is your favourite?

@iamtakashi
Member
iamtakashi commented Dec 21, 2016 edited

Which one is your favourite?

Mine is either Gray Darken 20 or 30 at the moment, assuming it will take time to change $gray to be darker grey.

@nickmomrik

I like the 30% example.

@folletto
Member

Should we aim to pass AAA that requires even higher contrast? Wouldn't AA be good enough?

If possible I'd try to get AAA, but overall I think we agreed to aim for AA. So when I evaluate I try to make sure AA is hit, and I check if I can manage to reach AAA too (depends on the component, usually).

I've added darken( $gray, 30% ) option with test results for AAA.

Awesome. In my view I'd go for the darker ones, but I'm ok with whichever you find better.

I'd also back Matias comment: if we can in this PR, let's try to darken ALSO the numbers, which are too light (disabling color in .DayPicker-Day for example.... and a few others... so the whole panel gets contrast):

screen shot 2016-12-22 at 12 13 22

In short, feel free to rebalance the whole set of colors in the entire calendar scheduler pop-up. :D

@iamtakashi
Member

I'd also back Matias comment: if we can in this PR, let's try to darken ALSO the numbers, which are too light.

Ah, I now understand what he meant there. Thanks for clarifying :)

feel free to rebalance the whole set of colors in the entire calendar scheduler pop-up

OK, that makes sense. I'll adjust the whole scheduler pop-up to bring more contrast to it.

@iamtakashi
Member
iamtakashi commented Dec 22, 2016 edited

I've adjusted some colours to add more contrast to the whole pop-over.

Now all text except the dates outside of the selected month pass AA. They needed to be lighter to separate well from the selected month dates, but I personally think that's acceptable.

I also didn't change the medium blue which doesn't pass AA, but that's probably better to discuss in a different place.

date-picker-before-after

How does this look to you?

@folletto
Member

For me it's 👍 design wise!

@iamtakashi iamtakashi changed the title from Date Picker: Update "today" marker to Date Picker: Update "today" marker and color contrast for better accessibility Dec 22, 2016
@obenland

CSS looks good too

@iamtakashi iamtakashi Date Picker: Update today marker, and add more contrast to the color …
…set used in the component for better accessibility
79ec85f
@iamtakashi iamtakashi merged commit d51b652 into master Dec 23, 2016

2 checks passed

ci/circleci Your tests passed on CircleCI!
Details
ci/i18n 1 new string. Warning -- 6% translated.
@iamtakashi iamtakashi deleted the update/date-picker-current-date branch Dec 23, 2016
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment