{"action":"created","issue":{"url":"https://api.github.com/repos/jungvonmatt/amp.dev/issues/53","repository_url":"https://api.github.com/repos/jungvonmatt/amp.dev","labels_url":"https://api.github.com/repos/jungvonmatt/amp.dev/issues/53/labels{/name}","comments_url":"https://api.github.com/repos/jungvonmatt/amp.dev/issues/53/comments","events_url":"https://api.github.com/repos/jungvonmatt/amp.dev/issues/53/events","html_url":"https://github.com/jungvonmatt/amp.dev/issues/53","id":350767844,"node_id":"MDU6SXNzdWUzNTA3Njc4NDQ=","number":53,"title":"Test design against WCAG","user":{"login":"matthiasrohmer","id":12857772,"node_id":"MDQ6VXNlcjEyODU3Nzcy","avatar_url":"https://avatars2.githubusercontent.com/u/12857772?v=4","gravatar_id":"","url":"https://api.github.com/users/matthiasrohmer","html_url":"https://github.com/matthiasrohmer","followers_url":"https://api.github.com/users/matthiasrohmer/followers","following_url":"https://api.github.com/users/matthiasrohmer/following{/other_user}","gists_url":"https://api.github.com/users/matthiasrohmer/gists{/gist_id}","starred_url":"https://api.github.com/users/matthiasrohmer/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/matthiasrohmer/subscriptions","organizations_url":"https://api.github.com/users/matthiasrohmer/orgs","repos_url":"https://api.github.com/users/matthiasrohmer/repos","events_url":"https://api.github.com/users/matthiasrohmer/events{/privacy}","received_events_url":"https://api.github.com/users/matthiasrohmer/received_events","type":"User","site_admin":false},"labels":[{"id":1024489461,"node_id":"MDU6TGFiZWwxMDI0NDg5NDYx","url":"https://api.github.com/repos/jungvonmatt/amp.dev/labels/department:concept","name":"department:concept","color":"dd9a71","default":false},{"id":1006720143,"node_id":"MDU6TGFiZWwxMDA2NzIwMTQz","url":"https://api.github.com/repos/jungvonmatt/amp.dev/labels/department:design","name":"department:design","color":"ffce00","default":false},{"id":1005908628,"node_id":"MDU6TGFiZWwxMDA1OTA4NjI4","url":"https://api.github.com/repos/jungvonmatt/amp.dev/labels/points:20","name":"points:20","color":"00ffe7","default":false},{"id":1008171113,"node_id":"MDU6TGFiZWwxMDA4MTcxMTEz","url":"https://api.github.com/repos/jungvonmatt/amp.dev/labels/type:task","name":"type:task","color":"c8ea85","default":false}],"state":"open","locked":false,"assignee":null,"assignees":[],"milestone":{"url":"https://api.github.com/repos/jungvonmatt/amp.dev/milestones/3","html_url":"https://github.com/jungvonmatt/amp.dev/milestone/3","labels_url":"https://api.github.com/repos/jungvonmatt/amp.dev/milestones/3/labels","id":3606658,"node_id":"MDk6TWlsZXN0b25lMzYwNjY1OA==","number":3,"title":"Sprint 2","description":"","creator":{"login":"matthiasrohmer","id":12857772,"node_id":"MDQ6VXNlcjEyODU3Nzcy","avatar_url":"https://avatars2.githubusercontent.com/u/12857772?v=4","gravatar_id":"","url":"https://api.github.com/users/matthiasrohmer","html_url":"https://github.com/matthiasrohmer","followers_url":"https://api.github.com/users/matthiasrohmer/followers","following_url":"https://api.github.com/users/matthiasrohmer/following{/other_user}","gists_url":"https://api.github.com/users/matthiasrohmer/gists{/gist_id}","starred_url":"https://api.github.com/users/matthiasrohmer/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/matthiasrohmer/subscriptions","organizations_url":"https://api.github.com/users/matthiasrohmer/orgs","repos_url":"https://api.github.com/users/matthiasrohmer/repos","events_url":"https://api.github.com/users/matthiasrohmer/events{/privacy}","received_events_url":"https://api.github.com/users/matthiasrohmer/received_events","type":"User","site_admin":false},"open_issues":9,"closed_issues":2,"state":"open","created_at":"2018-08-29T12:01:00Z","updated_at":"2018-09-07T08:33:54Z","due_on":"2018-09-12T07:00:00Z","closed_at":null},"comments":2,"created_at":"2018-08-15T10:55:55Z","updated_at":"2018-09-12T09:13:42Z","closed_at":null,"author_association":"NONE","body":"## Objective\r\n\r\nThe current state of the design should be matched against the [WCAG](https://www.w3.org/TR/WCAG21/). Specifically in terms of color contrast."},"comment":{"url":"https://api.github.com/repos/jungvonmatt/amp.dev/issues/comments/420573436","html_url":"https://github.com/jungvonmatt/amp.dev/issues/53#issuecomment-420573436","issue_url":"https://api.github.com/repos/jungvonmatt/amp.dev/issues/53","id":420573436,"node_id":"MDEyOklzc3VlQ29tbWVudDQyMDU3MzQzNg==","user":{"login":"LongoOfficial","id":41894292,"node_id":"MDQ6VXNlcjQxODk0Mjky","avatar_url":"https://avatars3.githubusercontent.com/u/41894292?v=4","gravatar_id":"","url":"https://api.github.com/users/LongoOfficial","html_url":"https://github.com/LongoOfficial","followers_url":"https://api.github.com/users/LongoOfficial/followers","following_url":"https://api.github.com/users/LongoOfficial/following{/other_user}","gists_url":"https://api.github.com/users/LongoOfficial/gists{/gist_id}","starred_url":"https://api.github.com/users/LongoOfficial/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/LongoOfficial/subscriptions","organizations_url":"https://api.github.com/users/LongoOfficial/orgs","repos_url":"https://api.github.com/users/LongoOfficial/repos","events_url":"https://api.github.com/users/LongoOfficial/events{/privacy}","received_events_url":"https://api.github.com/users/LongoOfficial/received_events","type":"User","site_admin":false},"created_at":"2018-09-12T09:13:42Z","updated_at":"2018-09-12T09:13:42Z","author_association":"COLLABORATOR","body":"Testing design against WCAG means in our team understanding the color contrast ratio of text color and background color. There are other factors to consider in order to be fully compliant with AA standard, but this should be the box we want to tick at least.\r\n\r\nWith our longer form articles and content texts we even hit AAA both on our white (ratio: 7.96) and light grey backgrounds (ratio: 7.64).\r\n\r\nWhen trying to make our vivid gradients fully WCAG 2.0 (AA) compliant, we would lose a lot of vitality and openness in our visual language.\r\n\r\nThese were our initial gradients:\r\n<img width=\"1227\" alt=\"bildschirmfoto 2018-09-12 um 10 51 21\" src=\"https://user-images.githubusercontent.com/41894292/45413589-db385400-b679-11e8-8956-eb8e6a3236d7.png\">\r\n\r\nThere are bright and vivid color transformations within the color spectrum.\r\nBut white text misses in some cases a high enough contrast ratio to hit AA.\r\n\r\nWhen making these gradients AA compliant we would end up with these gradients:\r\n<img width=\"1204\" alt=\"bildschirmfoto 2018-09-12 um 10 56 04\" src=\"https://user-images.githubusercontent.com/41894292/45413866-76c9c480-b67a-11e8-8efd-767272f13593.png\">\r\n\r\nThe visual appearance would change its direction to a more darkish look and feel which is contrary to visual idea of AMP of being inviting and open.\r\n\r\n\r\nThe idea now is to have a gradient were the majority of colors within that gradient work with the required contrast ratio, but also have a highlight top end with bright and vivid colors. We will need to make sure that text is in every case positioned on AA compliant color parts.\r\n\r\n<img width=\"586\" alt=\"bildschirmfoto 2018-09-12 um 11 12 12\" src=\"https://user-images.githubusercontent.com/41894292/45414932-be515000-b67c-11e8-8f84-ff2c5d29607e.png\">\r\n\r\nThis is something we would further explore in the next sprint together with the destination color principles and stage design."}}
{"actor":{"display_login":"LongoOfficial"}}