Skip to content

Instantly share code, notes, and snippets.

@nfreear

nfreear/accessibility.iet-contrast-fix.css.html

Last active April 21, 2021 10:17
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save nfreear/5758c35c3527980788cc85e06cacac1c to your computer and use it in GitHub Desktop.
Save nfreear/5758c35c3527980788cc85e06cacac1c to your computer and use it in GitHub Desktop.
Download ZIP
Demo of colour contrast fixes for IET home-page / 19-April-2021.
Raw
accessibility.iet-contrast-fix.css.html
<!doctype html><html lang="en"><meta charset=utf-8 ><title> IET contrast fixes demo </title>
<style>
:root {
--grid: 35rem;
--fix-a-opacity: 0.52;
--fix-b-link-color: #44B4F8;
}
body { margin: 1rem auto; max-width: var(--grid); }
hr { border-top: .5rem solid gray; margin: 2rem 0; }
h2 > tt {
font-size: 1.1rem;
margin-left: 1rem;
}
.grid {
background-color: black;
color: white;
font: 1rem/1.5 sans-serif;
margin: 1rem 0;
}
/*
Photo grids.
*/
.grid.grid-research_program {
background-color: gray;
background-image: url(https://images.prismic.io/ou-iet/66bbc023-90a4-4199-80e6-833d660fda73_11140395-61a0-45ea-8279-43d74c425fbc_naveed-ahmed-9Dt4WutvwDs-unsplash+landing.jpg?auto=compress,format&rect=0,0,3216,3216&w=960&h=960);
background-position: center;
background-repeat: no-repeat;
background-size: contain;
height: var(--grid);
width: var(--grid);
margin: 1rem 0;
}
.grid-research_program a {
color: white;
}
.grid_entry_inner {
background-color: rgba(0, 0, 0, 0.45); /* FAIL. */
opacity: 1;
height: calc( var(--grid) - 2rem);
padding: 1rem;
}
.grid_title {
font-size: 2rem;
font-weight: bold;
margin: 5rem 0;
}
.grid.grid-research_program.FIX-OPTION-A .grid_entry_inner {
background-color: rgba(0, 0, 0, var(--fix-a-opacity)); /* FIX A. */
opacity: 1;
}
/*
Twitbox.
*/
.grid.twitbox {
background: #15202B;
color: #ADB1B5;
font-size: .9rem;
padding: 2rem 1rem;
}
.grid.twitbox a {
color: #086faf; /* FAIL B. */
}
.grid.FIX-TWITBOX-B a {
color: var(--fix-b-link-color); /* FIX B. */
}
</style>
<h1> IET contrast fixes demo </h1>
<p> Note: this is a cut-down/ simplified demo &mdash; not mobile-first, etc.! </p>
<nav>
<a href="#fail-a">Contrast fail</a> |
<a href="#fix-a" >Contrast fix A</a> &mdash;
<a href="#fail-b">Twitbox contrast fail</a> |
<a href="#fix-b" >Twitbox contrast fix B</a>
</nav>
<hr>
<h2 id="fail-a"> Contrast FAIL <tt>(RGBA opacity: 0.45)</tt></h2>
<div class="grid grid-ZZ grid-research_program ORIGINAL">
<!--
<div class="grid_thumb">
<a href="research/advancing-teacher-professional-development-in-india" tabindex="-1">
<img src="https://images.prismic.io/ou-iet/66bbc023-90a4-4199-80e6-833d660fda73_11140395-61a0-45ea-8279-43d74c425fbc_naveed-ahmed-9Dt4WutvwDs-unsplash+landing.jpg?auto=compress,format&amp;rect=0,0,3216,3216&amp;w=960&amp;h=960" alt="1">
</a>
</div>
-->
<div class="grid_entry">
<!-- <img src="images/png.png" alt=""> -->
<div class="grid_entry_inner">
<div class="grid_cat">
RESEARCH • EDITORIAL
</div>
<div class="grid_entry_top">
<div class="grid_title grid-research_program"><a href="#!research/advancing-teacher-professional-development-in-india">Digital Badges and Covid-19: Advancing TPD</a></div>
<div class="grid_text">
IET are using digital badges to improve teacher professional development in India.
</div>
</div>
<div class="grid_meta">
<div class="grid_meta_item"><a href="#!research/programmes/learning-in-an-open-world">Learning in an Open World</a></div>
<div class="grid_meta_item"><a href="#!research/programmes/professional-and-digital-learning">Professional and Digital Learning</a></div>
</div>
</div>
</div>
</div>
<h2 id="fix-a"> Contrast fix option A <tt>(RGBA opacity: 0.52)</tt></h2>
<p> Important &mdash; the precise RGBA opacity to use across all images needs experimentation. </p>
<div class="grid grid-research_program FIX-OPTION-A">
<div class="grid_entry">
<div class="grid_entry_inner">
<div class="grid_cat">
RESEARCH • EDITORIAL
</div>
<div class="grid_entry_top">
<div class="grid_title grid-research_program"><a href="#!research/advancing-teacher-professional-development-in-india">Digital Badges and Covid-19: Advancing TPD</a></div>
<div class="grid_text">
IET are using digital badges to improve teacher professional development in India.
</div>
</div>
<div class="grid_meta">
<div class="grid_meta_item"><a href="#!research/programmes/learning-in-an-open-world">Learning in an Open World</a></div>
<div class="grid_meta_item"><a href="#!research/programmes/professional-and-digital-learning">Professional and Digital Learning</a></div>
</div>
</div>
</div>
</div>
<hr>
<h2 id="fail-b"> Twitbox contrast FAIL</h2>
<div class="grid twitbox ORIGINAL">
<p>Tweet by @IETatOU • 29 Mar 2021</p>
<p>Our suite of microcredentials will be running again this summer on @FutureLearn. IET's next cohort of Online Teaching and Teacher Development microcredentials will begin in June, covering a range of skills in learning and teaching. Find out more here.</p>
<a href="https://twitter.com/IETatOU/status/1376841989212282881">https://twitter.com/IETatOU/status/1376841989212282881</a>
</div>
<h2 id="fix-b"> Twitbox contrast FIX B — link text</h2>
<div class="grid twitbox FIX-TWITBOX-B">
<p>Tweet by <a href="https://twitter.com/IETatOU/status/1376841989212282881">@IETatOU • 29 Mar 2021</a></p>
<p>Our suite of microcredentials will be running again this summer on @FutureLearn. IET's next cohort of Online Teaching and Teacher Development microcredentials will begin in June, covering a range of skills in learning and teaching. Find out more here.</p>
</div>
<pre>
Nick Freear, 19-April-2021.
</pre>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment