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

report: Tweak colors so that we are WCAG2AA valid. #1686

Merged
merged 1 commit into from
Feb 17, 2017
Merged

report: Tweak colors so that we are WCAG2AA valid. #1686

merged 1 commit into from
Feb 17, 2017

Conversation

XhmikosR
Copy link
Contributor

before

1-before

after

2-after

Now the report should be WCAG2AA valid.

Copy link
Contributor

@ebidel ebidel left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Seems good. How are the red and orange values for a11y?

@XhmikosR
Copy link
Contributor Author

XhmikosR commented Feb 10, 2017 via email

@XhmikosR
Copy link
Contributor Author

XhmikosR commented Feb 11, 2017

@ebidel: the other colors had issues too with WCAG2AA. Please verify because I only tested this in theory since I don't have URLs that use --accent-color, --warning-color and --average-color.
Especially warning and average; not sure their difference is clear enough or not.

@XhmikosR
Copy link
Contributor Author

Fixed one more issue with poor color. Now the patch should be final.

@XhmikosR XhmikosR changed the title report: Tweak colors and specify html lang. report: Tweak colors so that we are WCAG2AA valid. Feb 11, 2017
@paulirish
Copy link
Member

@XhmikosR this is a bit of a larger question, but... how about HSL?
personally i find it massively easier to interpret at a glance. plus adjustments of lighter/darker are obviously more straightforward.

not sure how others feel tho. @ebidel

@XhmikosR
Copy link
Contributor Author

Personally I haven't had the need to use HSL yet, but from a quick look it does seem easier to interpret indeed.

This PR just makes sure the report is WCAG2AA valid, nothing more or less :)

@paulirish
Copy link
Member

@XhmikosR gotcha, sounds good. in that case, let me defer to @robdodson on this stuff

@brendankenny
Copy link
Member

brendankenny commented Feb 11, 2017

Is this for color contrast?

This idea might sound like a joke but isn't: maybe in CI we should run lighthouse then do a smokehouse run against the generated report. That would let us assert color contrast, etc

@XhmikosR
Copy link
Contributor Author

Yeah this is for color contrast in order to comply with WCAG2AA. I didn't go for WGAG2AAA because I thought "one step at a time".

@XhmikosR
Copy link
Contributor Author

IMO we should also run HTML validation on CI because in the past it has caught important things, see #1575.

@robdodson
Copy link
Contributor

Just started reviewing :)

:octocat: Sent from GH.

@robdodson
Copy link
Contributor

small nit: the version number under the word "Lighthouse" is still low contrast. I think if you set it to #aab3ed and remove the 0.4 opacity then it would meet WCAG2AA

@XhmikosR
Copy link
Contributor Author

XhmikosR commented Feb 13, 2017 via email

@XhmikosR
Copy link
Contributor Author

XhmikosR commented Feb 13, 2017 via email

@ebidel
Copy link
Contributor

ebidel commented Feb 13, 2017

@XhmikosR we've taken care of it.

@XhmikosR
Copy link
Contributor Author

XhmikosR commented Feb 13, 2017 via email

@paulirish
Copy link
Member

just kidding but really now it should be taken care of.

@ebidel
Copy link
Contributor

ebidel commented Feb 13, 2017

I blame the black header.

@XhmikosR
Copy link
Contributor Author

Hehe.

I reported him. Alternatively I guess you could lock the PRs but I won't be able to reply (I think).

@XhmikosR
Copy link
Contributor Author

XhmikosR commented Feb 13, 2017

Now about @robdodson's comment above, https://github.com/GoogleChrome/lighthouse/pull/1686/files#diff-7c4405f5b4874ecc329c5331597912e1R616

There's the change to the footer's color. And there's no opacity in footer.

@robdodson
Copy link
Contributor

Sorry, I was referring to this version number in the top left

screen shot 2017-02-14 at 8 42 56 am

@XhmikosR
Copy link
Contributor Author

@robdodson: I see now. But still, I don't get any errors for that chunk at all.

I can change it to #aab3ed and remove opacity if you prefer.

@robdodson
Copy link
Contributor

robdodson commented Feb 14, 2017 via email

@XhmikosR
Copy link
Contributor Author

I'm using http://squizlabs.github.io/HTML_CodeSniffer/.

No big deal, your change makes also sense. Just give me the final OK and I'll include it in this branch,

@XhmikosR
Copy link
Contributor Author

XhmikosR commented Feb 14, 2017

In fact your solution won't pass WCAG2AAA (3A) if there are plans to do so in the future.

@XhmikosR
Copy link
Contributor Author

I can make changes in another PR so that we are WCAG2AAA valid. The current changes are for WCAG2AA.

@robdodson
Copy link
Contributor

WCAG2AA should be fine. If you want to make the change I can sign off on the PR

@XhmikosR
Copy link
Contributor Author

XhmikosR commented Feb 14, 2017 via email

@XhmikosR
Copy link
Contributor Author

XhmikosR commented Feb 14, 2017

On a side note @paulirish we hit this failure on Windows quite often. Not sure what's causing it, but it seems the process can't be terminated for some reason.

Otherwise this should be merged so that we can move forward with more changes.

@robdodson
Copy link
Contributor

The version number being used is pretty important information. I'd like to still change it as mentioned in my prior comment before merging this PR

@XhmikosR
Copy link
Contributor Author

XhmikosR commented Feb 15, 2017 via email

@robdodson
Copy link
Contributor

I used the color picker and Lea Verou's contrast tool to confirm it's failing
https://leaverou.github.io/contrast-ratio/#%237E87D1-on-%232935B3

We don't need to shoot for WCAG2AAA, my understanding is WCAG2AA is the generally accepted standard and AAA is for advanced cases when you know your audience might contain a larger percentage of folks who need very high contrast for example.

@XhmikosR
Copy link
Contributor Author

Rebased and also fixed one new issue with .initial-nav.

@paulirish paulirish merged commit f79adc7 into GoogleChrome:master Feb 17, 2017
@XhmikosR XhmikosR deleted the report-accessibility-html-fix branch February 17, 2017 06:41
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

5 participants