Qwen Qwen3.8 Max (0902) – News Weather Information
via Alibaba · Generated
- AIMAC Debt 11.53
- Cost $0.26
- Total Violations 119
- HTML Size 87 KB
- Em Dashes 40
Screenshot
View Live Page
Accessibility Issues Found
119 Serious
-
color-contrast serious 116 instances
Elements must meet minimum color contrast ratio thresholds
Example HTML
<span>Morning Edition</span> -
target-size serious 2 instances
All touch targets must be 24px large, or leave sufficient space
Example HTML
<a href="#sports">Harborhawks punch October ticket</a> -
link-in-text-block serious 1 instance
Links must be distinguishable without relying on color
Example HTML
<a href="#faq" style="color:var(--red)">View the corrections log →</a>
Artifacts
View Generated HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>The Isobar — Independent News & Weather for Harbor City</title>
<meta name="description" content="The Isobar: Harbor City's independent newsroom and weather desk. Pressure-tested headlines, verified forecasts, data journalism that shows its work.">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300..900;1,9..144,300..900&family=Libre+Franklin:ital,wght@0,300..800;1,300..800&family=IBM+Plex+Mono:ital,wght@0,400;0,500;0,600;1,400&display=swap" rel="stylesheet">
<script>document.documentElement.classList.add('js');</script>
<style>
/* ============ TOKENS & RESET ============ */
:root{
--paper:#f4efe3; --paper2:#ece4d0; --paper3:#e4dbc4;
--ink:#1a1712; --ink2:#434036; --mut:#7d7666;
--hair:rgba(26,23,18,.18); --hair-soft:rgba(26,23,18,.10);
--red:#cf3410; --red-d:#a92a0b;
--navy:#0d1c29; --navy2:#12283a; --navy-line:rgba(210,225,235,.14);
--radar:#57e6ac; --cyan:#6fd3e8; --amber:#e8a13a; --grn:#2f9e63;
--serif:"Fraunces",Georgia,serif; --sans:"Libre Franklin",Helvetica,Arial,sans-serif; --mono:"IBM Plex Mono",Menlo,monospace;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--paper);color:var(--ink);font:400 16px/1.65 var(--sans);-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
ul,ol{list-style:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
::selection{background:var(--red);color:#fff}
:focus-visible{outline:2px solid var(--red);outline-offset:3px}
.wrap{max-width:1240px;margin-inline:auto;padding-inline:clamp(1rem,4vw,2.5rem)}
.skip{position:absolute;left:-9999px;top:0;background:var(--ink);color:var(--paper);padding:.7rem 1.2rem;z-index:2000;font-family:var(--mono);font-size:12px}
.skip:focus{left:12px;top:12px}
/* paper grain */
.grain{position:fixed;inset:-50%;width:200%;height:200%;pointer-events:none;z-index:1600;opacity:.5;mix-blend-mode:multiply;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.035 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.mono{font-family:var(--mono)}
.kick{font:600 11px/1.4 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--red);display:flex;align-items:center;gap:.7rem}
.kick::before{content:"";width:26px;height:2px;background:var(--red)}
.kick.dk{color:var(--radar)} .kick.dk::before{background:var(--radar)}
.hr{border:0;border-top:1px solid var(--hair);margin:0}
.hr.fat{border-top:3px solid var(--ink);position:relative}
.hr.fat::after{content:"";position:absolute;left:0;right:0;top:4px;border-top:1px solid var(--ink)}
/* buttons */
.btn{display:inline-flex;align-items:center;gap:.6rem;font:600 11.5px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;padding:.9rem 1.25rem;border:1px solid var(--ink);background:transparent;color:var(--ink);transition:transform .22s,box-shadow .22s,background .22s,color .22s,border-color .22s}
.btn:hover{background:var(--ink);color:var(--paper);transform:translate(-2px,-2px);box-shadow:3px 3px 0 var(--red)}
.btn .ar{transition:transform .22s}
.btn:hover .ar{transform:translateX(4px)}
.btn.solid{background:var(--red);border-color:var(--red);color:#fff}
.btn.solid:hover{background:var(--ink);border-color:var(--ink);box-shadow:3px 3px 0 var(--red)}
.btn.dk{border-color:rgba(220,235,240,.4);color:#e8f1f4}
.btn.dk:hover{background:#e8f1f4;color:var(--navy);box-shadow:3px 3px 0 var(--radar)}
.btn.sm{padding:.62rem .9rem;font-size:10.5px}
/* headline hover draw */
.hl a{background-image:linear-gradient(currentColor,currentColor);background-repeat:no-repeat;background-size:0% 2px;background-position:0 97%;transition:background-size .45s cubic-bezier(.22,.61,.36,1)}
.hl a:hover{background-size:100% 2px}
/* section headers */
.sec-head{display:flex;align-items:flex-end;justify-content:space-between;gap:1.5rem;padding-bottom:1.1rem;border-bottom:1px solid var(--ink);margin-bottom:2.6rem;flex-wrap:wrap}
.sec-head .idx{font:500 11px/1 var(--mono);letter-spacing:.2em;color:var(--mut);display:block;margin-bottom:.6rem}
.sec-head h2{font:600 clamp(1.9rem,3.6vw,3rem)/1.05 var(--serif);letter-spacing:-.01em}
.sec-head h2 em{font-style:italic;color:var(--red)}
.sec-head .side{font:500 11px/1.7 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--mut);max-width:280px;text-align:right}
section{padding:clamp(3.4rem,7vw,6rem) 0}
/* ============ UTILITY BAR ============ */
.util{background:var(--ink);color:#cfc7b4;font-family:var(--mono);font-size:11px;letter-spacing:.06em}
.util .wrap{display:flex;justify-content:space-between;align-items:center;gap:1.4rem;padding-block:.55rem;flex-wrap:wrap}
.util b{color:#fff;font-weight:600}
.up{color:#5fd394}.dn{color:#ff8563}
.util .cond a{display:inline-flex;gap:.5rem;align-items:center;color:#fff;border-bottom:1px dotted rgba(255,255,255,.4);padding-bottom:1px}
.dotlive{width:7px;height:7px;border-radius:50%;background:var(--red);display:inline-block;animation:pulse 1.6s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:1;box-shadow:0 0 0 0 rgba(207,52,16,.5)}50%{opacity:.55;box-shadow:0 0 0 5px rgba(207,52,16,0)}}
.util .mkts{display:flex;gap:1.3rem;flex-wrap:wrap}
@media(max-width:760px){.util .mkts{display:none}}
/* ============ MASTHEAD ============ */
.masthead{padding:2.2rem 0 1.4rem;text-align:center;border-bottom:1px solid var(--ink);position:relative}
.mast-top{display:flex;justify-content:space-between;align-items:center;font:500 10.5px/1.5 var(--mono);letter-spacing:.18em;text-transform:uppercase;color:var(--mut);max-width:1240px;margin:0 auto 1.6rem;padding-inline:clamp(1rem,4vw,2.5rem)}
.mast-logo{display:inline-flex;align-items:center;justify-content:center;gap:.9rem;margin-bottom:.4rem;color:var(--ink)}
.mast-logo svg{width:52px;height:52px}
.mast-title{font:900 clamp(3rem,9.5vw,6.4rem)/0.95 var(--serif);letter-spacing:-.02em;font-variation-settings:"opsz" 144}
.mast-title .word{white-space:nowrap}
.tagline{font:italic 400 clamp(.95rem,1.7vw,1.2rem)/1.5 var(--serif);color:var(--ink2);max-width:640px;margin:1rem auto 0}
.tagline b{color:var(--red);font-weight:600}
.rule-d{max-width:1240px;margin:1.5rem auto 0;padding-inline:clamp(1rem,4vw,2.5rem)}
.rule-d div{border-top:3px solid var(--ink);position:relative}
.rule-d div::after{content:"";position:absolute;left:0;right:0;top:4px;border-top:1px solid var(--ink)}
@media(max-width:640px){.mast-top span:nth-child(2){display:none}}
/* ============ NAV ============ */
.nav{position:sticky;top:0;z-index:1200;background:var(--paper);border-bottom:1px solid var(--ink);transition:box-shadow .3s}
.nav.stuck{box-shadow:0 6px 22px -12px rgba(26,23,18,.45)}
.nav .wrap{display:flex;align-items:center;justify-content:center;gap:0}
.nav a.nl{font:600 11.5px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;padding:1.1rem 1.05rem;position:relative;white-space:nowrap}
.nav a.nl::after{content:"";position:absolute;left:1.05rem;right:1.05rem;bottom:-1px;height:3px;background:var(--red);transform:scaleX(0);transform-origin:left;transition:transform .3s}
.nav a.nl:hover::after{transform:scaleX(1)}
.nav .sub{margin-left:.8rem}
.nav-scroll{overflow-x:auto;scrollbar-width:none;display:flex;align-items:center}
.nav-scroll::-webkit-scrollbar{display:none}
@media(max-width:1080px){.nav .wrap{justify-content:flex-start}}
/* ============ TICKER ============ */
.ticker{background:var(--ink);color:#efe9da;border-bottom:1px solid var(--ink);overflow:hidden;display:flex;align-items:stretch}
.ticker .badge{background:var(--red);color:#fff;font:700 11px/1 var(--mono);letter-spacing:.18em;display:flex;align-items:center;gap:.55rem;padding:.85rem 1.1rem;flex:0 0 auto;z-index:2}
.ticker .clip{overflow:hidden;flex:1;display:flex;align-items:center}
.ticker-track{display:flex;width:max-content;animation:tick 46s linear infinite}
.ticker:hover .ticker-track{animation-play-state:paused}
.tk-group{display:flex}
.tk-item{font:500 12px/1 var(--mono);letter-spacing:.05em;padding:.85rem 0;display:flex;align-items:center;white-space:nowrap}
.tk-item .k{color:var(--amber);margin:0 .6rem 0 1.6rem;font-weight:600}
.tk-item::after{content:"///";color:#5a554a;margin-left:1.6rem}
@keyframes tick{to{transform:translateX(-50%)}}
/* ============ FRONT SPREAD ============ */
.spread{padding-top:2.6rem}
.spread-grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,4.4fr);gap:2.6rem}
.lead .kick{margin-bottom:1rem}
.lead h1{font:650 clamp(2rem,4.6vw,3.6rem)/1.06 var(--serif);letter-spacing:-.015em;margin-bottom:1.1rem}
.lead .deck{font:italic 400 clamp(1.02rem,1.6vw,1.2rem)/1.55 var(--serif);color:var(--ink2);margin-bottom:1.3rem}
.byline{display:flex;flex-wrap:wrap;align-items:center;gap:.9rem;font:500 11px/1.5 var(--mono);letter-spacing:.06em;color:var(--mut);border-block:1px solid var(--hair);padding-block:.75rem;margin-bottom:1.4rem}
.byline img{width:34px;height:34px;border-radius:50%;border:1px solid var(--hair)}
.byline b{color:var(--ink)}
.vchip{margin-left:auto;display:inline-flex;align-items:center;gap:.45rem;border:1px solid var(--grn);color:var(--grn);padding:.32rem .6rem;font-size:10px;letter-spacing:.12em}
.frame{position:relative;overflow:hidden;border:1px solid var(--ink);background:var(--paper3)}
.frame img{width:100%;height:100%;object-fit:cover}
.kb img{animation:kb 26s ease-in-out infinite alternate;transform-origin:62% 38%}
@keyframes kb{from{transform:scale(1)}to{transform:scale(1.12) translate(-1.6%,1.4%)}}
figcaption, .cap{font:400 11px/1.6 var(--mono);color:var(--mut);padding-top:.6rem;letter-spacing:.02em}
.lead .body{column-count:2;column-gap:2.2rem;margin-top:1.6rem;font-size:.97rem;color:var(--ink2)}
.lead .body p+p{margin-top:.9rem}
.pull{column-span:none;font:italic 500 1.25rem/1.4 var(--serif);color:var(--ink);border-top:3px solid var(--red);border-bottom:1px solid var(--hair);padding:1rem 0;margin:.2rem 0 1rem}
.pull cite{display:block;font:600 10.5px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--red);margin-top:.6rem;font-style:normal}
@media(max-width:700px){.lead .body{column-count:1}}
/* wire column */
.wire{border-left:1px solid var(--ink);padding-left:2.2rem;display:flex;flex-direction:column}
.wire-h{display:flex;justify-content:space-between;align-items:baseline;font:600 12px/1 var(--mono);letter-spacing:.18em;padding-bottom:.9rem;border-bottom:3px solid var(--ink)}
.wire-h span:last-child{color:var(--red)}
.wire ul{flex:1}
.wire li{padding:1.05rem 0;border-bottom:1px solid var(--hair)}
.wire li .t{font:500 10.5px/1 var(--mono);letter-spacing:.14em;color:var(--mut);display:flex;gap:.7rem;margin-bottom:.45rem}
.wire li .t b{color:var(--red)}
.wire li h3{font:600 1.02rem/1.3 var(--serif)}
.wire li p{font-size:.85rem;color:var(--ink2);margin-top:.35rem}
.wire .more{padding-top:1.1rem;font:600 11px/1 var(--mono);letter-spacing:.14em;color:var(--red)}
@media(max-width:980px){.spread-grid{grid-template-columns:1fr}.wire{border-left:0;padding-left:0;border-top:1px solid var(--ink);padding-top:1.8rem}}
/* brief tiles */
.briefs{display:grid;grid-template-columns:repeat(3,1fr);gap:1.6rem;margin-top:3rem}
.tile{border:1px solid var(--ink);background:var(--paper2);padding:1.4rem;display:flex;flex-direction:column;gap:.8rem;position:relative;transition:transform .3s,box-shadow .3s}
.tile:hover{transform:translate(-3px,-3px);box-shadow:5px 5px 0 var(--ink)}
.tile .kick{font-size:10px}
.tile h3{font:600 1.22rem/1.25 var(--serif)}
.tile p{font-size:.86rem;color:var(--ink2);flex:1}
.tile .foot{display:flex;justify-content:space-between;align-items:center;font:500 10.5px/1 var(--mono);letter-spacing:.1em;color:var(--mut);border-top:1px solid var(--hair);padding-top:.9rem}
.tile .foot a{color:var(--red);font-weight:600;letter-spacing:.14em}
.tile .frame{aspect-ratio:16/8}
.mkt{font-family:var(--mono);font-size:12px;width:100%;border-collapse:collapse}
.mkt td{padding:.42rem 0;border-bottom:1px dashed var(--hair)}
.mkt td:last-child{text-align:right;font-weight:600}
@media(max-width:860px){.briefs{grid-template-columns:1fr}}
/* ============ FORECAST LAB (dark) ============ */
.lab{background:var(--navy);color:#dfe9ee;position:relative}
.lab::before{content:"";position:absolute;inset:0;background:
linear-gradient(rgba(120,160,180,.05) 1px,transparent 1px),
linear-gradient(90deg,rgba(120,160,180,.05) 1px,transparent 1px);
background-size:56px 56px;pointer-events:none}
.lab .sec-head{border-color:rgba(220,235,240,.3)}
.lab .sec-head h2{color:#fff}
.lab .sec-head .side{color:#8fa8b5}
.lab-grid{display:grid;grid-template-columns:minmax(0,6.2fr) minmax(0,5fr);gap:2.4rem;position:relative}
.panel{background:var(--navy2);border:1px solid var(--navy-line);padding:1.6rem}
.lab-tools{display:flex;justify-content:space-between;align-items:center;margin-bottom:1.4rem;gap:1rem;flex-wrap:wrap}
.seg{display:inline-flex;border:1px solid rgba(220,235,240,.35)}
.seg button{font:600 11px/1 var(--mono);letter-spacing:.12em;padding:.55rem .85rem;color:#9fb6c2;transition:.2s}
.seg button.on{background:#e8f1f4;color:var(--navy)}
.stations{display:grid;grid-template-columns:repeat(4,1fr);gap:.7rem;margin-bottom:1.4rem}
.st-btn{border:1px solid var(--navy-line);padding:.8rem .7rem;text-align:left;font-family:var(--mono);transition:.25s;position:relative}
.st-btn .n{font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:#9fb6c2;display:block;margin-bottom:.35rem}
.st-btn .t{font:600 1.35rem/1 var(--serif);color:#fff}
.st-btn .c{font-size:9.5px;letter-spacing:.12em;color:#7e97a4;display:block;margin-top:.3rem}
.st-btn:hover{border-color:#5f8296}
.st-btn.on{border-color:var(--radar);background:rgba(87,230,172,.07)}
.st-btn.on::after{content:"";position:absolute;inset:-1px;border:1px solid var(--radar);pointer-events:none}
@media(max-width:760px){.stations{grid-template-columns:repeat(2,1fr)}}
.now{display:flex;gap:1.6rem;align-items:flex-start;flex-wrap:wrap;transition:opacity .3s,transform .3s}
.now.tick{opacity:0;transform:translateY(8px)}
.now .big{font:600 clamp(4rem,8vw,6.4rem)/0.9 var(--serif);color:#fff}
.now .big sup{font-size:.35em;vertical-align:super;color:var(--radar)}
.now .cond{font:600 12px/1.6 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--radar)}
.now .feels{font-size:12px;color:#9fb6c2;font-family:var(--mono)}
.now .meta{margin-left:auto;flex:1;min-width:230px}
.meta-rows{display:grid;grid-template-columns:1fr 1fr;gap:.1rem 1.4rem;font-family:var(--mono);font-size:12px}
.meta-rows div{display:flex;justify-content:space-between;gap:.6rem;padding:.5rem 0;border-bottom:1px solid var(--navy-line)}
.meta-rows span:first-child{color:#8fa8b5;letter-spacing:.08em;font-size:10.5px;text-transform:uppercase;padding-top:.15em}
.meta-rows b{color:#fff;font-weight:600;display:flex;align-items:center;gap:.4rem}
.compass{width:16px;height:16px;transition:transform .8s cubic-bezier(.22,.61,.36,1)}
.aqi-good{color:var(--radar)} .aqi-mid{color:var(--amber)}
.press-wrap{margin-top:1.4rem;display:flex;align-items:flex-end;gap:1.2rem;border-top:1px solid var(--navy-line);padding-top:1.2rem}
.press-wrap .lbl{font:500 10px/1.7 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:#8fa8b5}
.press-wrap svg{flex:1;max-width:280px}
.spark{stroke:var(--radar);stroke-width:2;fill:none;stroke-dasharray:400;stroke-dashoffset:400;transition:stroke-dashoffset 1.6s ease .2s}
.on .spark{stroke-dashoffset:0}
/* week strip */
.week{display:grid;grid-template-columns:repeat(7,1fr);gap:.5rem;margin-top:1.5rem}
.day{border:1px solid var(--navy-line);padding:.7rem .4rem;text-align:center;font-family:var(--mono);transition:.25s;cursor:default}
.day:hover{border-color:#5f8296;transform:translateY(-3px)}
.day .d{font-size:9.5px;letter-spacing:.16em;color:#8fa8b5}
.day .code{font-size:10px;font-weight:600;letter-spacing:.1em;margin:.5rem 0 .3rem;color:var(--amber)}
.day .code.stm,.day .code.gle{color:#ff8563}
.day .code.sun{color:var(--radar)}
.day .code.cld,.day .code.shw{color:var(--cyan)}
.day .hi{color:#fff;font-weight:600;font-size:.95rem}
.day .lo{color:#7e97a4;font-size:.8rem}
.day .bar{height:3px;background:#1c3547;margin-top:.55rem;position:relative;overflow:hidden}
.day .bar i{position:absolute;top:0;bottom:0;background:linear-gradient(90deg,var(--cyan),var(--amber));transition:.5s}
@media(max-width:640px){.week{grid-template-columns:repeat(4,1fr)}}
/* radar */
.radar-head{display:flex;justify-content:space-between;align-items:center;gap:1rem;margin-bottom:.9rem;flex-wrap:wrap}
.radar-head .mode{display:inline-flex;border:1px solid var(--navy-line)}
.radar-head .mode button{font:600 10px/1 var(--mono);letter-spacing:.14em;padding:.5rem .8rem;color:#8fa8b5}
.radar-head .mode button.on{background:var(--radar);color:var(--navy)}
.radar-box{position:relative;aspect-ratio:4/3;overflow:hidden;border:1px solid var(--navy-line);background:#08131d}
.radar-box .terrain{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.28;filter:contrast(1.1)}
.radar-grid{position:absolute;inset:0;background:
repeating-linear-gradient(0deg,transparent 0 55px,rgba(87,230,172,.12) 55px 56px),
repeating-linear-gradient(90deg,transparent 0 55px,rgba(87,230,172,.12) 55px 56px)}
.rings{position:absolute;inset:0;display:grid;place-items:center}
.rings i{position:absolute;border:1px solid rgba(87,230,172,.22);border-radius:50%}
.rings i:nth-child(1){width:32%;height:42%}.rings i:nth-child(2){width:60%;height:80%}.rings i:nth-child(3){width:88%;height:118%}
.rings::before{content:"";position:absolute;left:50%;top:0;bottom:0;width:1px;background:rgba(87,230,172,.2)}
.rings::after{content:"";position:absolute;top:50%;left:0;right:0;height:1px;background:rgba(87,230,172,.2)}
.sweep{position:absolute;inset:0;background:conic-gradient(from 0deg,transparent 0 292deg,rgba(87,230,172,0) 292deg,rgba(87,230,172,.22) 344deg,rgba(87,230,172,.55) 359deg,transparent 360deg);animation:sweep 4.4s linear infinite;mix-blend-mode:screen}
@keyframes sweep{to{transform:rotate(360deg)}}
.blip{position:absolute;width:9px;height:9px;border-radius:50%;background:var(--radar)}
.blip::after{content:"";position:absolute;inset:-7px;border:1px solid var(--radar);border-radius:50%;animation:ping 2.2s ease-out infinite}
.blip.w{background:var(--cyan)}.blip.w::after{border-color:var(--cyan)}
.blip.t{background:var(--amber)}.blip.t::after{border-color:var(--amber)}
@keyframes ping{from{transform:scale(.4);opacity:1}to{transform:scale(1.7);opacity:0}}
.blip .tag{position:absolute;left:14px;top:-6px;font:600 9px/1.4 var(--mono);letter-spacing:.1em;color:var(--radar);white-space:nowrap;background:rgba(8,19,29,.75);padding:.2rem .4rem}
.blip.w .tag{color:var(--cyan)}.blip.t .tag{color:var(--amber)}
.radar-box[data-mode="wind"] .blip.p, .radar-box[data-mode="wind"] .blip.t,
.radar-box[data-mode="temp"] .blip.p, .radar-box[data-mode="temp"] .blip.w{opacity:.12}
.radar-foot{display:flex;justify-content:space-between;gap:1rem;font:500 10.5px/1.7 var(--mono);letter-spacing:.08em;color:#8fa8b5;margin-top:.8rem;flex-wrap:wrap}
.radar-foot b{color:var(--radar)}
.alert{margin-top:1.4rem;border:1px solid rgba(232,161,58,.5);border-left:4px solid var(--amber);background:rgba(232,161,58,.08);padding:1rem 1.2rem;display:flex;gap:1rem;align-items:flex-start}
.alert .dotlive{margin-top:.45rem;background:var(--amber)}
.alert h4{font:600 12px/1.5 var(--mono);letter-spacing:.14em;color:var(--amber)}
.alert p{font-size:.85rem;color:#cfdde4;margin-top:.25rem}
.alert a{color:#fff;border-bottom:1px dotted rgba(255,255,255,.5);font-family:var(--mono);font-size:11px;letter-spacing:.1em}
.conf{margin-top:1.4rem;font-family:var(--mono);font-size:11px}
.conf .row{display:flex;justify-content:space-between;padding:.35rem 0;color:#8fa8b5;letter-spacing:.08em}
.conf .meter{height:5px;background:#1c3547;display:flex;gap:2px;margin-top:.4rem}
.conf .meter i{flex:1;background:#22455c}.conf .meter i.f{background:var(--radar)}.conf .meter i.m{background:var(--amber)}
@media(max-width:1020px){.lab-grid{grid-template-columns:1fr}}
/* ============ DATA DESK (sticky two-col) ============ */
.dd-grid{display:grid;grid-template-columns:minmax(0,4.6fr) minmax(0,7fr);gap:3rem;align-items:start}
.dd-left{position:sticky;top:86px}
.dd-left h2{font:600 clamp(1.9rem,3.4vw,2.9rem)/1.08 var(--serif);margin:.9rem 0 1.1rem}
.dd-left p{color:var(--ink2);font-size:.97rem;margin-bottom:1rem}
.method{margin:1.6rem 0;border-top:3px solid var(--ink)}
.method li{display:flex;gap:1rem;padding:.95rem 0;border-bottom:1px solid var(--hair);align-items:baseline}
.method .num{font:600 11px/1 var(--mono);color:var(--red);letter-spacing:.1em;min-width:2.4rem}
.method b{font-family:var(--serif);font-size:1.05rem;font-weight:600;display:block}
.method span{font-size:.83rem;color:var(--mut)}
.dcards{display:grid;gap:1.8rem}
.dcard{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);border:1px solid var(--ink);background:var(--paper2);overflow:hidden;transition:transform .3s,box-shadow .3s}
.dcard:hover{transform:translate(-3px,-3px);box-shadow:6px 6px 0 var(--ink)}
.dcard .frame{border:0;border-right:1px solid var(--ink);aspect-ratio:4/3}
.dcard .tx{padding:1.4rem 1.5rem;display:flex;flex-direction:column;gap:.65rem}
.dcard .stat{font:600 11px/1 var(--mono);letter-spacing:.12em;color:var(--red);background:rgba(207,52,16,.08);align-self:flex-start;padding:.45rem .6rem}
.dcard h3{font:600 1.35rem/1.22 var(--serif)}
.dcard p{font-size:.88rem;color:var(--ink2);flex:1}
.dcard .foot{display:flex;justify-content:space-between;align-items:center;gap:1rem;border-top:1px solid var(--hair);padding-top:.85rem;font:500 10.5px/1.4 var(--mono);color:var(--mut);letter-spacing:.06em}
.follow{font:600 10px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;border:1px solid var(--ink);padding:.55rem .8rem;transition:.25s;white-space:nowrap}
.follow:hover{background:var(--red);border-color:var(--red);color:#fff}
.follow.on{background:var(--ink);color:var(--paper);border-color:var(--ink)}
@media(max-width:1020px){.dd-grid{grid-template-columns:1fr}.dd-left{position:static}}
@media(max-width:700px){.dcard{grid-template-columns:1fr}.dcard .frame{border-right:0;border-bottom:1px solid var(--ink)}}
/* ============ WORLD ============ */
.world-row{display:flex;gap:1.4rem;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:1.2rem;scrollbar-width:thin;scrollbar-color:var(--ink) transparent}
.world-row::-webkit-scrollbar{height:5px}
.world-row::-webkit-scrollbar-thumb{background:var(--ink)}
.wcard{flex:0 0 min(340px,82vw);scroll-snap-align:start;border:1px solid var(--ink);background:var(--paper2);display:flex;flex-direction:column;transition:transform .3s,box-shadow .3s}
.wcard:hover{transform:translateY(-6px);box-shadow:0 14px 26px -18px rgba(26,23,18,.6)}
.wcard .frame{aspect-ratio:16/10;border:0;border-bottom:1px solid var(--ink)}
.wcard .tx{padding:1.3rem;display:flex;flex-direction:column;gap:.6rem;flex:1}
.wcard h3{font:600 1.25rem/1.25 var(--serif)}
.wcard p{font-size:.86rem;color:var(--ink2);flex:1}
.wcard .meta{display:flex;justify-content:space-between;align-items:center;gap:.8rem;font:500 10.5px/1 var(--mono);color:var(--mut);letter-spacing:.06em;border-top:1px solid var(--hair);padding-top:.85rem}
.wcard .meta img{width:26px;height:26px;border-radius:50%}
.wcard .meta .who{display:flex;align-items:center;gap:.55rem}
.pager{display:flex;gap:.6rem}
.pg{width:44px;height:44px;border:1px solid var(--ink);display:grid;place-items:center;font-size:18px;transition:.25s}
.pg:hover{background:var(--ink);color:var(--paper);box-shadow:3px 3px 0 var(--red)}
/* ============ FIELD NOTES (postcards) ============ */
.photos{background:var(--paper2);border-block:1px solid var(--hair)}
.pc-board{display:flex;flex-wrap:wrap;justify-content:center;gap:2.2rem;padding:1.5rem 0}
.postcard{background:#fbf8f0;border:1px solid var(--hair);padding:.8rem .8rem 1rem;box-shadow:0 14px 30px -18px rgba(26,23,18,.55);width:min(280px,78vw);position:relative;transition:transform .45s cubic-bezier(.22,.61,.36,1),box-shadow .45s}
.postcard::before{content:"";position:absolute;top:-12px;left:50%;transform:translateX(-50%) rotate(-2deg);width:88px;height:24px;background:rgba(214,196,142,.55);border:1px solid rgba(26,23,18,.08)}
.postcard img{width:100%;aspect-ratio:4/3;object-fit:cover;filter:saturate(.92)}
.postcard figcaption{font:400 10.5px/1.6 var(--mono);color:var(--ink2);padding-top:.7rem;letter-spacing:.02em}
.postcard:nth-child(1){transform:rotate(-4deg)}
.postcard:nth-child(2){transform:rotate(2.5deg) translateY(16px)}
.postcard:nth-child(3){transform:rotate(-1.5deg)}
.postcard:nth-child(4){transform:rotate(4deg) translateY(10px)}
.postcard:nth-child(5){transform:rotate(-3deg) translateY(22px)}
.postcard:hover{transform:rotate(0) translateY(-6px) scale(1.03);box-shadow:0 26px 44px -20px rgba(26,23,18,.6);z-index:5}
/* ============ BULLETIN + RAIL ============ */
.bull-grid{display:grid;grid-template-columns:minmax(0,7.6fr) minmax(0,3.6fr);gap:3rem}
.bull-list{display:flex;flex-direction:column}
.bull-item{display:grid;grid-template-columns:160px minmax(0,1fr);gap:1.4rem;padding:1.5rem 0;border-bottom:1px solid var(--hair)}
.bull-item:first-child{padding-top:0}
.bull-item .frame{aspect-ratio:4/3}
.bull-item h3{font:600 1.3rem/1.25 var(--serif);margin:.35rem 0 .5rem}
.bull-item p{font-size:.9rem;color:var(--ink2)}
.bull-item .meta{font:500 10.5px/1 var(--mono);color:var(--mut);letter-spacing:.08em;display:flex;gap:1rem;margin-top:.7rem}
.bull-item .meta b{color:var(--red)}
.rail{display:flex;flex-direction:column;gap:1.8rem}
.widget{border:1px solid var(--ink);background:var(--paper2)}
.widget>.w-h{font:600 11px/1 var(--mono);letter-spacing:.18em;background:var(--ink);color:var(--paper);padding:.8rem 1.1rem;display:flex;justify-content:space-between}
.widget>.w-h span:last-child{color:var(--amber)}
.w-b{padding:1.1rem}
.most li{display:flex;gap:1rem;padding:.75rem 0;border-bottom:1px dashed var(--hair);align-items:baseline}
.most li:last-child{border:0}
.most .n{font:600 1.5rem/1 var(--serif);color:var(--red);min-width:1.6rem}
.most a{font:600 .92rem/1.35 var(--serif)}
.most li:hover a{color:var(--red)}
.vid{position:relative;cursor:pointer}
.vid .frame{aspect-ratio:16/9;border:0}
.vid .play{position:absolute;inset:0;display:grid;place-items:center}
.vid .play i{width:58px;height:58px;border-radius:50%;background:var(--red);color:#fff;display:grid;place-items:center;font-size:20px;padding-left:4px;transition:.3s;box-shadow:0 0 0 0 rgba(207,52,16,.4)}
.vid:hover .play i{transform:scale(1.12);box-shadow:0 0 0 14px rgba(207,52,16,.15)}
.vid .dur{position:absolute;right:10px;bottom:10px;background:var(--ink);color:#fff;font:600 10px/1 var(--mono);padding:.35rem .5rem;letter-spacing:.1em}
.evt li{display:flex;gap:1rem;padding:.7rem 0;border-bottom:1px dashed var(--hair)}
.evt li:last-child{border:0}
.evt .d{flex:0 0 52px;border:1px solid var(--ink);text-align:center;font-family:var(--mono);align-self:flex-start}
.evt .d b{display:block;background:var(--red);color:#fff;font-size:15px;padding:.25rem 0}
.evt .d span{display:block;font-size:9px;letter-spacing:.14em;padding:.2rem 0}
.evt h4{font:600 .95rem/1.3 var(--serif)}
.evt p{font:400 10.5px/1.5 var(--mono);color:var(--mut)}
@media(max-width:1020px){.bull-grid{grid-template-columns:1fr}}
@media(max-width:560px){.bull-item{grid-template-columns:1fr}.bull-item .frame{max-width:280px}}
/* ============ TRUST: stats + quotes ============ */
.stats{background:var(--red);color:#fff;padding:2.6rem 0}
.stats .wrap{display:grid;grid-template-columns:repeat(4,1fr);gap:2rem;text-align:left}
.stat-n{font:600 clamp(2rem,4vw,3.2rem)/1 var(--serif);display:block}
.stat-l{font:600 10.5px/1.6 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.75);display:block;margin-top:.5rem}
@media(max-width:860px){.stats .wrap{grid-template-columns:repeat(2,1fr)}}
.quotes-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1.6rem;margin-top:2.4rem}
.quote{border:1px solid var(--ink);background:var(--paper2);padding:1.7rem;position:relative;transition:transform .3s,box-shadow .3s}
.quote:hover{transform:translate(-3px,-3px);box-shadow:6px 6px 0 var(--red)}
.quote::before{content:"“";font:900 4rem/0.6 var(--serif);color:var(--red);display:block;margin-bottom:1.1rem}
.quote p{font:italic 400 1.02rem/1.6 var(--serif);color:var(--ink2)}
.quote .who{display:flex;align-items:center;gap:.9rem;margin-top:1.3rem;border-top:1px solid var(--hair);padding-top:1.1rem}
.quote .who img{width:44px;height:44px;border-radius:50%;border:1px solid var(--hair)}
.quote .who b{font:600 .95rem/1.2 var(--serif);display:block}
.quote .who span{font:500 10px/1.5 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--mut)}
@media(max-width:760px){.quotes-grid{grid-template-columns:1fr}}
/* ============ SUBSCRIBE ============ */
.plans-wrap{border:1px solid var(--ink);background:var(--paper2)}
.plans-head{padding:2.4rem 2.2rem 0;text-align:center}
.plans-head h2{font:600 clamp(1.9rem,3.6vw,3rem)/1.1 var(--serif)}
.plans-head p{color:var(--ink2);max-width:560px;margin:.9rem auto 0;font-size:.98rem}
.nl-form{display:flex;gap:.7rem;max-width:520px;margin:1.6rem auto 0;flex-wrap:wrap;justify-content:center}
.nl-form input{flex:1;min-width:230px;background:var(--paper);border:1px solid var(--ink);padding:.95rem 1.1rem;font:400 14px/1 var(--sans);color:var(--ink)}
.nl-form input::placeholder{color:var(--mut)}
.nl-ok{font:600 12px/1.6 var(--mono);letter-spacing:.06em;color:var(--grn);border:1px solid var(--grn);padding:1rem 1.4rem;max-width:520px;margin:1.6rem auto 0}
.nl-form.err input{animation:shake .4s;border-color:var(--red)}
@keyframes shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}
.tiers{display:grid;grid-template-columns:repeat(3,1fr);gap:1.6rem;padding:2.4rem 2.2rem 2.6rem}
.tier{border:1px solid var(--ink);background:var(--paper);padding:1.7rem;display:flex;flex-direction:column;gap:1rem;position:relative;transition:transform .3s,box-shadow .3s}
.tier:hover{transform:translateY(-6px);box-shadow:0 16px 28px -20px rgba(26,23,18,.6)}
.tier.hot{background:var(--ink);color:var(--paper);transform:translateY(-10px)}
.tier.hot:hover{transform:translateY(-16px)}
.tier .ribbon{position:absolute;top:-11px;left:50%;transform:translateX(-50%);background:var(--red);color:#fff;font:700 9.5px/1 var(--mono);letter-spacing:.2em;padding:.45rem .8rem;white-space:nowrap}
.tier h3{font:600 1.3rem/1 var(--serif)}
.tier .price{font:600 2.3rem/1 var(--serif)}
.tier .price span{font:500 11px/1 var(--mono);letter-spacing:.1em;color:var(--mut)}
.tier.hot .price span{color:#9a9384}
.tier ul{display:flex;flex-direction:column;gap:.55rem;font-size:.87rem;color:var(--ink2);flex:1}
.tier.hot ul{color:#cfc7b4}
.tier li::before{content:"—";margin-right:.6rem;color:var(--red)}
@media(max-width:900px){.tiers{grid-template-columns:1fr}.tier.hot{transform:none}}
/* ============ FAQ ============ */
.faq-grid{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:3rem;align-items:start}
.faq-side h2{font:600 clamp(1.8rem,3vw,2.6rem)/1.1 var(--serif);margin:.8rem 0 1rem}
.faq-side p{color:var(--ink2);font-size:.95rem}
.correction{margin-top:1.6rem;border:1px solid var(--hair);border-left:4px solid var(--red);background:var(--paper2);padding:1rem 1.2rem;font:400 11.5px/1.7 var(--mono);color:var(--ink2)}
.correction b{color:var(--red);letter-spacing:.14em}
.qa{border-bottom:1px solid var(--ink)}
.qa:first-child{border-top:3px solid var(--ink)}
.qa-q{width:100%;display:flex;justify-content:space-between;align-items:center;gap:1.4rem;text-align:left;padding:1.25rem .2rem;font:600 1.12rem/1.3 var(--serif);transition:color .25s}
.qa-q:hover{color:var(--red)}
.qa-ic{font:400 1.6rem/1 var(--sans);color:var(--red);transition:transform .4s;flex:0 0 auto}
.qa.open .qa-ic{transform:rotate(45deg)}
.qa-a{display:grid;grid-template-rows:0fr;transition:grid-template-rows .5s cubic-bezier(.22,.61,.36,1)}
.qa.open .qa-a{grid-template-rows:1fr}
.qa-inner{overflow:hidden}
.qa-inner p{padding:0 .2rem 1.4rem;color:var(--ink2);font-size:.93rem;max-width:62ch}
@media(max-width:900px){.faq-grid{grid-template-columns:1fr}}
/* ============ FOOTER ============ */
footer{background:var(--ink);color:#b8b09d;margin-top:0}
.f-main{display:grid;grid-template-columns:minmax(0,4fr) repeat(3,minmax(0,2fr)) minmax(0,3fr);gap:2.6rem;padding:4rem 0 3rem}
.f-brand .mast-logo{color:var(--paper);margin-bottom:.8rem}
.f-brand .mast-logo svg{width:40px;height:40px}
.f-brand .name{font:900 1.9rem/1 var(--serif);color:#f4efe3;letter-spacing:-.01em}
.f-brand p{font-size:.86rem;margin-top:.9rem;max-width:30ch}
.socials{display:flex;gap:.6rem;margin-top:1.3rem}
.socials a{width:38px;height:38px;border:1px solid rgba(244,239,227,.28);display:grid;place-items:center;transition:.25s}
.socials a:hover{background:var(--red);border-color:var(--red);color:#fff;transform:translateY(-3px)}
.socials svg{width:15px;height:15px;fill:currentColor}
.f-col h4{font:600 10.5px/1 var(--mono);letter-spacing:.2em;color:#f4efe3;margin-bottom:1.1rem}
.f-col li{padding:.32rem 0;font-size:.87rem}
.f-col a:hover{color:#fff;border-bottom:1px dotted var(--red)}
.f-contact{font:400 12px/1.9 var(--mono);letter-spacing:.02em}
.f-contact b{color:#f4efe3;display:block;letter-spacing:.14em;font-size:10px;text-transform:uppercase;margin-top:.9rem}
.f-contact b:first-child{margin-top:0}
.f-bottom{border-top:1px solid rgba(244,239,227,.16);padding:1.3rem 0;display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;font:400 10.5px/1.7 var(--mono);letter-spacing:.06em;color:#7d7666}
.f-bottom a:hover{color:#fff}
@media(max-width:1020px){.f-main{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.f-main{grid-template-columns:1fr}}
/* ============ REVEAL SYSTEM ============ */
html.js [data-rv]{opacity:0;transform:translateY(22px);transition:opacity .8s ease,transform .8s cubic-bezier(.22,.61,.36,1);transition-delay:var(--d,0s)}
html.js [data-rv].on{opacity:1;transform:none}
html.js .lm{overflow:hidden;display:block}
html.js .lm>span{display:block;transform:translateY(112%);transition:transform .9s cubic-bezier(.22,.61,.36,1);transition-delay:var(--d,0s)}
html.js .lm.on>span{transform:none}
html.js [data-rv].lm{opacity:1;transform:none}
/* reduced motion */
@media (prefers-reduced-motion: reduce){
html{scroll-behavior:auto}
*,*::before,*::after{animation:none!important;transition:none!important}
html.js [data-rv],html.js .lm>span{opacity:1!important;transform:none!important}
.ticker-track{transform:none}
.kb img{transform:none}
}
</style>
</head>
<body>
<a class="skip" href="#front">Skip to content</a>
<div class="grain" aria-hidden="true"></div>
<!-- UTILITY STRIP -->
<div class="util" role="banner">
<div class="wrap">
<span id="today">Tuesday, June 10, 2025</span>
<span><b id="clock">06:42:08</b> ET · <span class="dotlive" aria-hidden="true"></span> NEWSROOM LIVE</span>
<span class="cond"><a href="#weather">☰ 57° FOG — HARBORFRONT PIER 4 · SUNSET 8:24 PM</a></span>
<span class="mkts">
<span>S&P 5,412.8 <b class="up">▲0.4%</b></span>
<span>PORT-IDX 187.3 <b class="up">▲1.2%</b></span>
<span>BRENT 78.12 <b class="dn">▼0.6%</b></span>
<span>EUR/USD 1.091 <b class="up">▲0.1%</b></span>
</span>
</div>
</div>
<!-- MASTHEAD -->
<header class="masthead">
<div class="mast-top">
<span>Morning Edition</span>
<span>Vol. VII · No. 214 · Est. 2019</span>
<span>Harbor City, HC</span>
</div>
<div class="mast-logo" aria-hidden="true">
<svg viewBox="0 0 48 48" fill="none" stroke="currentColor" stroke-width="2">
<circle cx="27" cy="21" r="6"/>
<circle cx="24" cy="24" r="13" stroke-dasharray="62 20"/>
<circle cx="21" cy="27" r="20" stroke-dasharray="94 32"/>
<circle cx="27" cy="21" r="2.6" fill="#cf3410" stroke="none"/>
</svg>
</div>
<h1 class="mast-title"><span class="word" id="mastTitle" data-text="The Isobar">The Isobar</span></h1>
<p class="tagline">Independent news & weather for Harbor City. <b>Every headline pressure-tested. Every forecast field-verified.</b></p>
<div class="rule-d"><div></div></div>
</header>
<!-- NAV -->
<nav class="nav" id="nav" aria-label="Primary">
<div class="wrap">
<div class="nav-scroll">
<a class="nl" href="#world">World</a>
<a class="nl" href="#weather">Weather Desk</a>
<a class="nl" href="#data">Data Desk</a>
<a class="nl" href="#city">Business</a>
<a class="nl" href="#sports">Sports</a>
<a class="nl" href="#culture">Culture</a>
<a class="nl" href="#archive">Archive</a>
<a class="btn solid sm sub" href="#subscribe">Subscribe</a>
</div>
</div>
</nav>
<!-- BREAKING TICKER -->
<div class="ticker" aria-label="Breaking news ticker">
<span class="badge"><span class="dotlive" aria-hidden="true"></span>BREAKING</span>
<div class="clip">
<div class="ticker-track">
<div class="tk-group">
<span class="tk-item"><b class="k">WEATHER</b> Gale watch issued for Thursday — barrier cofferdams to be stress-tested</span>
<span class="tk-item"><b class="k">CITY HALL</b> Council approves $4.2B Meridian Barrier in 9–2 vote; work begins April</span>
<span class="tk-item"><b class="k">MARKETS</b> Port futures climb 1.2% on tariff pause; pilots warn of backlog through July</span>
<span class="tk-item"><b class="k">VERIFY</b> Isobar Verify scores 5 of 7 debate claims accurate, 2 misleading</span>
<span class="tk-item"><b class="k">SPORTS</b> Harborhawks clinch playoff berth on Okafor's overtime winner</span>
<span class="tk-item"><b class="k">SENSORS</b> Riverbend air-quality network reaches 140 nodes citywide</span>
</div>
<div class="tk-group" aria-hidden="true">
<span class="tk-item"><b class="k">WEATHER</b> Gale watch issued for Thursday — barrier cofferdams to be stress-tested</span>
<span class="tk-item"><b class="k">CITY HALL</b> Council approves $4.2B Meridian Barrier in 9–2 vote; work begins April</span>
<span class="tk-item"><b class="k">MARKETS</b> Port futures climb 1.2% on tariff pause; pilots warn of backlog through July</span>
<span class="tk-item"><b class="k">VERIFY</b> Isobar Verify scores 5 of 7 debate claims accurate, 2 misleading</span>
<span class="tk-item"><b class="k">SPORTS</b> Harborhawks clinch playoff berth on Okafor's overtime winner</span>
<span class="tk-item"><b class="k">SENSORS</b> Riverbend air-quality network reaches 140 nodes citywide</span>
</div>
</div>
</div>
</div>
<main id="front">
<!-- ============ THE LEAD / FRONT SPREAD ============ -->
<section class="spread">
<div class="wrap">
<div class="spread-grid">
<article class="lead">
<p class="kick" data-rv>The Lead · Infrastructure & Climate</p>
<h1 class="lm" data-rv><span>Harbor City approves $4.2B Meridian Barrier; construction begins in the spring</span></h1>
<p class="deck" data-rv style="--d:.1s">After eleven years of studies, lawsuits and two near-misses with storm surge, the council voted 9–2 overnight to fund the largest coastal defense project in the city's history. The first gates must hold water by 2029.</p>
<div class="byline" data-rv style="--d:.15s">
<img src="https://i.pravatar.cc/68?u=mara-ellison" alt="Portrait of Mara Ellison">
<span>By <b>Mara Ellison</b>, Infrastructure Correspondent<br>Photographs by <b>Theo Rasmussen</b></span>
<span>Updated 6:12 a.m. ET · 8 min read</span>
<span class="vchip">✓ ISOBAR VERIFIED</span>
</div>
<figure data-rv style="--d:.2s">
<div class="frame kb" style="aspect-ratio:16/9">
<img src="https://picsum.photos/seed/harbor-barrier-crane/1280/720" alt="Crane silhouettes over the harbor at dawn where the Meridian Barrier will be built">
</div>
<figcaption>Dawn over the cofferdam site at Meridian Quay, hours after the vote. Photograph: Theo Rasmussen / The Isobar</figcaption>
</figure>
<div class="body" data-rv style="--d:.25s">
<p>The funding package pairs $2.9 billion in municipal bonds with a federal resilience match secured last month, ending a standoff that had stalled the project since 2021. Engineers will begin driving sheet pilings near Pier 4 as early as April, with the first of nine retractable gates scheduled for commission trials in the winter of 2028.</p>
<div class="pull">"We are building for the storm we have already seen twice. The question was never whether the water returns — it was whether we would be ready."<cite>— Council President Ada Okonkwo</cite></div>
<p>The Isobar's Data Desk independently modeled the barrier's coverage against four decades of surge records and found it would have prevented 87% of documented flood damage since 1987 — but leaves Riverbend's low-lying blocks reliant on a secondary pump network that is not yet funded. Our reporting team has published all source documents alongside this story, per our open-receipts policy.</p>
</div>
</article>
<aside class="wire" aria-label="The wire briefing">
<div class="wire-h"><span>THE WIRE — 60-SECOND BRIEF</span><span>↻ LIVE</span></div>
<ul>
<li data-rv><span class="t"><b>06:41</b> VERIFY</span><h3 class="hl"><a href="#data">Isobar Verify: five claims from last night's barrier debate, checked</a></h3><p>Two claims rated misleading, including a figure that conflated state and federal funding streams.</p></li>
<li data-rv style="--d:.05s"><span class="t"><b>06:22</b> TRANSIT</span><h3 class="hl"><a href="#city">Line 3 fare-free pilot begins Saturday</a></h3><p>The transit authority will track ridership and delay data across the eight-weekend trial.</p></li>
<li data-rv style="--d:.1s"><span class="t"><b>05:58</b> MARKETS</span><h3 class="hl"><a href="#business">Port futures climb on tariff pause</a></h3><p>Harbor pilots warn the backlog will take until mid-July to clear, whatever the headlines say.</p></li>
<li data-rv style="--d:.15s"><span class="t"><b>05:40</b> WEATHER</span><h3 class="hl"><a href="#weather">Gale watch for Thursday</a></h3><p>Gusts to 52 kt forecast for the outer harbor. Barrier cofferdams will be monitored closely.</p></li>
<li data-rv style="--d:.2s"><span class="t"><b>05:12</b> SPORTS</span><h3 class="hl"><a href="#sports">Harborhawks punch October ticket</a></h3><p>An overtime winner clinches the franchise's first playoff berth in six seasons.</p></li>
<li data-rv style="--d:.25s"><span class="t"><b>04:55</b> CITY</span><h3 class="hl"><a href="#data">Air sensor network reaches 140 nodes</a></h3><p>Riverbend's community-led mesh now streams block-level particulate data every 90 seconds.</p></li>
</ul>
<a class="more" href="#subscribe">READ THE FULL MORNING BRIEFING →</a>
</aside>
</div>
<!-- brief tiles: sports / business / archive -->
<div class="briefs">
<article class="tile" id="sports" data-rv>
<figure class="frame kb"><img src="https://picsum.photos/seed/harborhawks-arena/640/320" alt="Arena lights over the Harborhawks home court"></figure>
<p class="kick">Sports</p>
<h3 class="hl"><a href="#sports">Overtime, again: Harborhawks seize the East's final playoff seat</a></h3>
<p>Denny Okafor buried the winner with 1.9 seconds left as 18,400 fans shook the Quay Arena floor — and our box-score team logged every possession to show how the fourth line won it.</p>
<div class="foot"><span>By D. Okafor Sr. · 5 min</span><a href="#sports">READ MORE →</a></div>
</article>
<article class="tile" id="business" data-rv style="--d:.1s">
<p class="kick">Business · Morning Money</p>
<h3 class="hl"><a href="#business">Tariff pause lifts port futures; pilots call the rally "paper optimism"</a></h3>
<table class="mkt" aria-label="Market snapshot">
<tr><td>HARBOR PORT-INDEX</td><td class="up">187.3 ▲1.2%</td></tr>
<tr><td>CONTAINER SPOT (HC)</td><td class="up">$2,114 ▲0.8%</td></tr>
<tr><td>BRENT CRUDE</td><td class="dn">78.12 ▼0.6%</td></tr>
<tr><td>MUNICIPAL BOND 2041</td><td class="up">4.12% ▼3bp</td></tr>
</table>
<p>Full analysis lands in the 6 a.m. dispatch, with charts from the trade desk.</p>
<div class="foot"><span>By R. Whitfield · 4 min</span><a href="#business">READ MORE →</a></div>
</article>
<article class="tile" id="archive" data-rv style="--d:.2s">
<figure class="frame"><img src="https://picsum.photos/seed/archive-flood-1987/640/320?grayscale" alt="Archival front page from the 1987 flood"></figure>
<p class="kick">From the Archive</p>
<h3 class="hl"><a href="#archive">June 10, 1987 — the flood that drew the city's first isobars</a></h3>
<p>Digitized pages, field radio transcripts and the forecast that missed by six hours. Browse 2,400 front pages in our public archive.</p>
<div class="foot"><span>Archive Desk</span><a href="#archive">EXPLORE →</a></div>
</article>
</div>
</div>
</section>
<!-- ============ FORECAST LAB ============ -->
<section class="lab" id="weather">
<div class="wrap">
<div class="sec-head">
<div>
<span class="idx mono">SEC. 02 · WEATHER DESK</span>
<h2 class="lm" data-rv><span>The Forecast Lab</span></h2>
</div>
<p class="side">Live observations from our four city stations & the IBX-9 Doppler array. Verified daily against port-authority gauges.</p>
</div>
<div class="lab-grid">
<div class="panel" data-rv id="labPanel">
<div class="lab-tools">
<span class="kick dk">Station Network · Harbor City</span>
<div class="seg" role="group" aria-label="Temperature units">
<button id="uF" class="on" aria-pressed="true">°F</button>
<button id="uC" aria-pressed="false">°C</button>
</div>
</div>
<div class="stations" id="stations" role="group" aria-label="Choose a weather station"></div>
<div class="now" id="nowPanel" aria-live="polite">
<div>
<div class="big"><span id="nowTemp">57</span><sup id="nowUnit">°F</sup></div>
<div class="cond" id="nowCond">Light fog</div>
<div class="feels" id="nowFeels">Feels like 54° · Dew point 55°</div>
</div>
<div class="meta">
<div class="meta-rows">
<div><span>Wind</span><b><svg class="compass" id="windArrow" viewBox="0 0 16 16" aria-hidden="true"><path d="M8 1l3.2 12L8 10.6 4.8 13z" fill="#57e6ac"/></svg><span id="windVal">9 kt ENE</span></b></div>
<div><span>Gusts</span><b id="gustVal">16 kt</b></div>
<div><span>Humidity</span><b id="humVal">92%</b></div>
<div><span>Pressure</span><b><span id="pressVal">29.91</span> <span id="pressTrend" style="color:#ff8563">▼</span></b></div>
<div><span>Visibility</span><b id="visVal">2.1 mi</b></div>
<div><span>Air Quality</span><b class="aqi-good" id="aqiVal">31 · GOOD</b></div>
</div>
</div>
</div>
<div class="press-wrap" data-rv>
<span class="lbl">Pressure<br>· 24h trend ·<br><b id="pressDelta" style="color:#fff">−0.12 inHg</b></span>
<svg viewBox="0 0 280 44" preserveAspectRatio="none" aria-hidden="true">
<polyline class="spark" id="sparkline" points=""/>
</svg>
</div>
<div class="week" id="weekStrip" aria-label="Seven day forecast"></div>
</div>
<div class="panel" data-rv style="--d:.1s">
<div class="radar-head">
<span class="kick dk" style="font-size:10px">IBX-9 Doppler · Live Composite</span>
<div class="mode" role="group" aria-label="Radar layer">
<button class="on" data-mode="precip">PRECIP</button>
<button data-mode="wind">WIND</button>
<button data-mode="temp">TEMP</button>
</div>
</div>
<div class="radar-box" id="radarBox" data-mode="precip">
<img class="terrain" src="https://picsum.photos/seed/harbor-coast-terrain/900/675?grayscale&blur=2" alt="">
<div class="radar-grid" aria-hidden="true"></div>
<div class="rings" aria-hidden="true"><i></i><i></i><i></i></div>
<div class="sweep" aria-hidden="true"></div>
<span class="blip p" style="top:26%;left:30%" aria-hidden="true"><span class="tag">CELL A · HEAVY RAIN</span></span>
<span class="blip p" style="top:58%;left:18%" aria-hidden="true"><span class="tag">SHOWERS</span></span>
<span class="blip w" style="top:40%;left:64%" aria-hidden="true"><span class="tag">GUST FRONT 46KT</span></span>
<span class="blip t" style="top:70%;left:56%" aria-hidden="true"><span class="tag">WARM SECTOR 68°</span></span>
</div>
<div class="radar-foot">
<span>SWEEP 4.4s · RANGE 120 NM · <b>REFRESHED <span id="radarAge">38</span>S AGO</b></span>
<span>NEXRES COMPOSITE · © ISOBAR WX</span>
</div>
<div class="alert">
<span class="dotlive" aria-hidden="true"></span>
<div>
<h4>GALE WATCH — COASTAL HARBOR CITY</h4>
<p>In effect Thursday 4:00 a.m. to 10:00 p.m. Seas 9–13 ft, gusts to 52 kt on the outer harbor. Small craft should remain in port.<br><a href="#weather">READ THE FULL ADVISORY →</a></p>
</div>
</div>
<div class="conf">
<div class="row"><span>FORECAST CONFIDENCE · NEXT 7 DAYS</span><span>METHOD: ENSEMBLE BLENDED, POSTED DAILY</span></div>
<div class="meter" aria-hidden="true"><i class="f"></i><i class="f"></i><i class="f"></i><i class="m"></i><i class="m"></i><i></i><i></i></div>
<div class="row" style="margin-top:.4rem"><span>DAYS 1–3: HIGH · 91%</span><span>DAYS 4–7: MODERATE · 66%</span></div>
</div>
</div>
</div>
</div>
</section>
<!-- ============ DATA DESK ============ -->
<section id="data">
<div class="wrap">
<div class="dd-grid">
<div class="dd-left">
<p class="kick" data-rv>Sec. 03 · Data Desk</p>
<h2 class="lm" data-rv><span>Journalism that shows its receipts.</span></h2>
<p data-rv style="--d:.1s">Our data desk pairs reporters with analysts and meteorologists. Every dataset we cite is published alongside the story — raw files, cleaning notes and the code that produced each chart.</p>
<p data-rv style="--d:.15s">When we're wrong, we say so quickly and visibly. That discipline is why Harbor City's institutions answer our records requests, and why readers trust our numbers.</p>
<ol class="method" data-rv style="--d:.2s">
<li><span class="num">01</span><div><b>Collect</b><span>Public records, sensor feeds and FOIA responses — logged with timestamps.</span></div></li>
<li><span class="num">02</span><div><b>Verify</b><span>Two independent fact-checkers per dataset; three sources for any contested claim.</span></div></li>
<li><span class="num">03</span><div><b>Publish</b><span>Methodology pages in plain language, with the headline written last — never before.</span></div></li>
<li><span class="num">04</span><div><b>Correct</b><span>A public corrections log, versioned and never quietly edited.</span></div></li>
</ol>
<a class="btn" href="#data">Follow the Data Desk <span class="ar">→</span></a>
</div>
<div class="dcards">
<article class="dcard" data-rv>
<figure class="frame"><img src="https://picsum.photos/seed/heat-index-chart/640/480" alt="Chart plotting Harbor City summer temperatures"></figure>
<div class="tx">
<span class="stat">+2.9°F SINCE 1984</span>
<h3 class="hl"><a href="#data">Counting the heat: forty years of Harbor City summers, night by night</a></h3>
<p>We rebuilt the city's temperature record from 2.1 million hourly observations — including 312 nights that never dropped below 75°, a threshold unknown before 2003.</p>
<div class="foot"><span>By L. Ferreira & the Data Desk · 12 min read</span><button class="follow" aria-pressed="false">+ Follow Topic</button></div>
</div>
</article>
<article class="dcard" data-rv style="--d:.08s">
<figure class="frame"><img src="https://picsum.photos/seed/flood-projects-map/640/480" alt="Map of flood infrastructure projects"></figure>
<div class="tx">
<span class="stat">$1.9B UNACCOUNTED FOR</span>
<h3 class="hl"><a href="#data">Where the flood money went: mapping 213 projects, block by block</a></h3>
<p>An eight-month audit of every resilience appropriation since 1987. Forty-one projects were funded twice on paper; nineteen were never built at all. All 213 parcels are on our public map.</p>
<div class="foot"><span>By M. Ellison & J. Wu · 18 min read</span><button class="follow" aria-pressed="false">+ Follow Topic</button></div>
</div>
</article>
<article class="dcard" data-rv style="--d:.16s">
<figure class="frame"><img src="https://picsum.photos/seed/transit-commute-index/640/480" alt="Transit delay data visualization"></figure>
<div class="tx">
<span class="stat">11 MIN LOST DAILY</span>
<h3 class="hl"><a href="#data">The Commute Index: delay, line by line, measured ourselves</a></h3>
<p>For ninety days our reporters rode every line with GPS loggers, then compared the results to the transit authority's official punctuality reports. The gap was fourteen points.</p>
<div class="foot"><span>By A. Osei · 9 min read</span><button class="follow" aria-pressed="false">+ Follow Topic</button></div>
</div>
</article>
<article class="dcard" data-rv style="--d:.24s">
<figure class="frame"><img src="https://picsum.photos/seed/air-sensor-network/640/480" alt="Neighborhood air quality sensor installation"></figure>
<div class="tx">
<span class="stat">140 SENSORS LIVE</span>
<h3 class="hl"><a href="#data">Sensor city: what 140 air monitors say about your block</a></h3>
<p>A community-built mesh now produces hyperlocal particulate readings every 90 seconds. We calibrated every node against a reference station — here's how yours reads.</p>
<div class="foot"><span>By the Sensor Desk · 7 min read</span><button class="follow" aria-pressed="false">+ Follow Topic</button></div>
</div>
</article>
</div>
</div>
</div>
</section>
<!-- ============ WORLD AFFAIRS ============ -->
<section id="world" style="padding-top:0">
<div class="wrap">
<div class="sec-head">
<div>
<span class="idx mono">SEC. 04 · WORLD AFFAIRS</span>
<h2 class="lm" data-rv><span>The world, <em>from the harbor.</em></span></h2>
</div>
<div class="pager" data-rv>
<button class="pg" id="wPrev" aria-label="Scroll world stories left">←</button>
<button class="pg" id="wNext" aria-label="Scroll world stories right">→</button>
</div>
</div>
<div class="world-row" id="worldRow" data-rv>
<article class="wcard">
<figure class="frame kb"><img src="https://picsum.photos/seed/geneva-peace-talks/640/400" alt="Delegates arriving for cease-fire talks in Geneva"></figure>
<div class="tx"><p class="kick" style="font-size:10px">Diplomacy</p>
<h3 class="hl"><a href="#world">Cease-fire talks resume in Geneva as monitors log the quietest week in months</a></h3>
<p>Independent observers recorded 14 violations in seven days — down from 210 the week prior. Negotiators caution the calendar, not the weapons, has changed so far.</p>
<div class="meta"><span class="who"><img src="https://i.pravatar.cc/52?u=sofia-reyes" alt="">S. Reyes, Geneva Bureau</span><span>6 MIN</span></div>
</div>
</article>
<article class="wcard">
<figure class="frame kb"><img src="https://picsum.photos/seed/nairobi-battery-grid/640/400" alt="Construction of a grid-scale battery facility in Nairobi"></figure>
<div class="tx"><p class="kick" style="font-size:10px">Energy</p>
<h3 class="hl"><a href="#world">Nairobi's tech corridor races to build Africa's first grid-scale battery</a></h3>
<p>The 400 MWh project would store geothermal output for evening peaks. Its founders, many alumni of Harbor City's own port engineering firms, say cost parity arrives by 2027.</p>
<div class="meta"><span class="who"><img src="https://i.pravatar.cc/52?u=daniel-kip" alt="">D. Kiprop</span><span>8 MIN</span></div>
</div>
</article>
<article class="wcard">
<figure class="frame kb"><img src="https://picsum.photos/seed/osaka-typhoon-warning/640/400" alt="Osaka's coastal early warning infrastructure"></figure>
<div class="tx"><p class="kick" style="font-size:10px">Climate</p>
<h3 class="hl"><a href="#world">Osaka's typhoon warning system becomes a model for coastal megacities</a></h3>
<p>Cell-broadcast alerts issued eleven minutes earlier cut evacuation time by a third. A Harbor City delegation visits this month as the Meridian Barrier's alert design is finalized.</p>
<div class="meta"><span class="who"><img src="https://i.pravatar.cc/52?u=yuki-tanabe" alt="">Y. Tanabe</span><span>7 MIN</span></div>
</div>
</article>
<article class="wcard">
<figure class="frame kb"><img src="https://picsum.photos/seed/ballot-audit-observers/640/400" alt="Election observers auditing ballot records"></figure>
<div class="tx"><p class="kick" style="font-size:10px">Democracy</p>
<h3 class="hl"><a href="#world">São Paulo pilots open-source ballot audits with citizen observers</a></h3>
<p>Randomized recounts, published live, with every tally sheet online within an hour. The pilot's designers want the code adopted as public infrastructure.</p>
<div class="meta"><span class="who"><img src="https://i.pravatar.cc/52?u=camila-nunes" alt="">C. Nunes</span><span>9 MIN</span></div>
</div>
</article>
<article class="wcard">
<figure class="frame kb"><img src="https://picsum.photos/seed/arctic-shipping-lane/640/400" alt="Container ship in northern waters"></figure>
<div class="tx"><p class="kick" style="font-size:10px">Trade</p>
<h3 class="hl"><a href="#world">The northern lane opens early — and insurers are rewriting the map</a></h3>
<p>Ice-free weeks arrived a month ahead of the ten-year average. Premiums for polar routing fell 22%, and Harbor City's own underwriters are quietly repositioning.</p>
<div class="meta"><span class="who"><img src="https://i.pravatar.cc/52?u=erik-holm" alt="">E. Holm, Trade Desk</span><span>5 MIN</span></div>
</div>
</article>
</div>
</div>
</section>
<!-- ============ FIELD NOTES / PHOTO DESK ============ -->
<section class="photos" id="culture">
<div class="wrap">
<div class="sec-head">
<div>
<span class="idx mono">SEC. 05 · CULTURE & PHOTO DESK</span>
<h2 class="lm" data-rv><span>Field notes, pinned to the desk.</span></h2>
</div>
<p class="side">Dispatches from our four staff photographers, shot on assignment across the harbor.</p>
</div>
<div class="pc-board">
<figure class="postcard" data-rv><img src="https://picsum.photos/seed/trawlers-dawn-fog/460/345" alt="Fishing trawlers heading out in morning fog"><figcaption>05:12 — trawlers slip out ahead of the front. Pier 9, Harborfront.</figcaption></figure>
<figure class="postcard" data-rv style="--d:.08s"><img src="https://picsum.photos/seed/storm-chasers-route9/460/345" alt="Storm chasers staged along a highway"><figcaption>The WX crew stages on Route 9 before Thursday's gale.</figcaption></figure>
<figure class="postcard" data-rv style="--d:.16s"><img src="https://picsum.photos/seed/flood-archive-87/460/345?grayscale" alt="Archival photograph of the 1987 flood"><figcaption>FROM THE VAULT — the 1987 flood, Meridian Quay. Negative #4471.</figcaption></figure>
<figure class="postcard" data-rv style="--d:.24s"><img src="https://picsum.photos/seed/bridge-fog-bank/460/345" alt="Fog rolling over a suspension bridge"><figcaption>A fog bank crosses the Meridian Bridge at golden hour.</figcaption></figure>
<figure class="postcard" data-rv style="--d:.32s"><img src="https://picsum.photos/seed/radar-dome-sunset/460/345" alt="The IBX-9 radar dome at sunset"><figcaption>The IBX-9 dome at North Airfield, keeping watch since 2021.</figcaption></figure>
</div>
</div>
</section>
<!-- ============ CITY BULLETIN + RAIL ============ -->
<section id="city">
<div class="wrap">
<div class="sec-head">
<div>
<span class="idx mono">SEC. 06 · CITY & COMMUNITY</span>
<h2 class="lm" data-rv><span>The Bulletin.</span></h2>
</div>
<p class="side">Neighborhood reporting, what's on, and the stories readers flag to us first.</p>
</div>
<div class="bull-grid">
<div class="bull-list">
<article class="bull-item" data-rv>
<figure class="frame kb"><img src="https://picsum.photos/seed/farmers-market-winter/320/240" alt="Riverbend farmers market stalls"></figure>
<div><p class="kick" style="font-size:10px">Community Tip</p>
<h3 class="hl"><a href="#city">Riverbend farmers market goes year-round after record winter turnout</a></h3>
<p>Vendors voted 38–4 to keep Saturday stalls open through February, banking on the heated pavilion the city finally wired last month. Three new growers join from the delta co-op.</p>
<div class="meta"><span><b>FLAGGED BY 47 READERS</b></span><span>By P. Nguyen · 3 min</span></div>
</div>
</article>
<article class="bull-item" data-rv style="--d:.08s">
<figure class="frame kb"><img src="https://picsum.photos/seed/school-rooftop-solar/320/240" alt="Solar panels on a school rooftop"></figure>
<div><p class="kick" style="font-size:10px">Education</p>
<h3 class="hl"><a href="#city">School board approves rooftop solar for twelve campuses — students will read the meters</a></h3>
<p>The program pairs installers with physics classes who will publish weekly generation data on a student-run dashboard. Our Data Desk is auditing the savings projections.</p>
<div class="meta"><span><b>BOARD VOTE 6–1</b></span><span>By P. Nguyen · 4 min</span></div>
</div>
</article>
<article class="bull-item" data-rv style="--d:.16s">
<figure class="frame kb"><img src="https://picsum.photos/seed/tram-line3-farefree/320/240" alt="A Line 3 tram at a downtown stop"></figure>
<div><p class="kick" style="font-size:10px">Transit</p>
<h3 class="hl"><a href="#city">Fare-free weekends on Line 3 begin Saturday — here's what we'll be measuring</a></h3>
<p>Ridership, dwell times, and whether the promised extra service actually appears. We've posted our tracking methodology in advance and invite readers to send their own logs.</p>
<div class="meta"><span><b>8-WEEKEND PILOT</b></span><span>By A. Osei · 5 min</span></div>
</div>
</article>
</div>
<aside class="rail" aria-label="Bulletin sidebar">
<div class="widget" data-rv>
<div class="w-h"><span>MOST READ · 24H</span><span>▲</span></div>
<ul class="w-b most">
<li><span class="n">1</span><a href="#front">Council approves $4.2B Meridian Barrier</a></li>
<li><span class="n">2</span><a href="#weather">Thursday's gale: what the models actually agree on</a></li>
<li><span class="n">3</span><a href="#data">Where the flood money went — the full map</a></li>
<li><span class="n">4</span><a href="#sports">Harborhawks clinch: every possession charted</a></li>
<li><span class="n">5</span><a href="#archive">The 1987 forecast that missed by six hours</a></li>
</ul>
</div>
<div class="widget" data-rv style="--d:.08s">
<div class="w-h"><span>VIDEO HIGHLIGHTS</span><span>▶</span></div>
<div class="w-b vid">
<figure class="frame"><img src="https://picsum.photos/seed/radar-dome-tour/640/360" alt="Inside the IBX-9 radar dome"></figure>
<span class="play" aria-hidden="true"><i>▶</i></span>
<span class="dur">02:41</span>
<figcaption style="padding-top:.8rem">Inside the IBX-9 dome: how a Thursday forecast is built — with chief meteorologist Inés Vartanian.</figcaption>
</div>
</div>
<div class="widget" data-rv style="--d:.16s">
<div class="w-h"><span>UPCOMING</span><span>◆</span></div>
<ul class="w-b evt">
<li><span class="d"><b>14</b><span>JUN</span></span><div><h4>Outer Harbor Cleanup — volunteer call</h4><p>09:00 · Pier 9 staging · Isobar crew on site</p></div></li>
<li><span class="d"><b>18</b><span>JUN</span></span><div><h4>Live Forecast Q&A with the Weather Desk</h4><p>18:30 · Streamed free for all readers</p></div></li>
<li><span class="d"><b>21</b><span>JUN</span></span><div><h4>Solstice Festival — photo desk open studio</h4><p>12:00–20:00 · Meridian Quay print room</p></div></li>
</ul>
</div>
</aside>
</div>
</div>
</section>
<!-- ============ STATS BAND ============ -->
<div class="stats" aria-label="Newsroom by the numbers">
<div class="wrap">
<div data-rv><span class="stat-n"><span data-count="212400">0</span></span><span class="stat-l">Daily readers</span></div>
<div data-rv style="--d:.08s"><span class="stat-n"><span data-count="92.4" data-dec="1">0</span>%</span><span class="stat-l">Day-1 forecast accuracy</span></div>
<div data-rv style="--d:.16s"><span class="stat-n"><span data-count="140">0</span></span><span class="stat-l">Live sensor nodes</span></div>
<div data-rv style="--d:.24s"><span class="stat-n"><span data-count="11">0</span></span><span class="stat-l">Corrections issued YTD — quickly & visibly</span></div>
</div>
</div>
<!-- ============ TESTIMONIALS ============ -->
<section id="trust">
<div class="wrap">
<div class="sec-head">
<div>
<span class="idx mono">SEC. 07 · READER TRUST</span>
<h2 class="lm" data-rv><span>Trust is our only <em>currency.</em></span></h2>
</div>
<p class="side">From pilots to teachers — why Harbor City keeps The Isobar on the record.</p>
</div>
<div class="quotes-grid">
<blockquote class="quote" data-rv>
<p>I plan the fishing fleet's week around the Isobar's coastal forecast. Two days' notice on last month's gale saved us a boat — and probably a crew.</p>
<div class="who"><img src="https://i.pravatar.cc/88?u=ewa-lindqvist" alt=""><div><b>Ewa Lindqvist</b><span>Harbor Pilot, Local 12</span></div></div>
</blockquote>
<blockquote class="quote" data-rv style="--d:.08s">
<p>Their corrections page is the reason I subscribe. Most outlets bury their mistakes; the Isobar headlines them. A newsroom that shows its work earns my trust.</p>
<div class="who"><img src="https://i.pravatar.cc/88?u=marcus-bell" alt=""><div><b>Marcus Bell</b><span>Civics Teacher, Harbor City High</span></div></div>
</blockquote>
<blockquote class="quote" data-rv style="--d:.16s">
<p>The Data Desk's flood-money map is the best piece of accountability journalism this city has seen in a decade. We cite it in our own planning reports.</p>
<div class="who"><img src="https://i.pravatar.cc/88?u=amara-diallo" alt=""><div><b>Dr. Amara Diallo</b><span>Urban Planner, Harbor City University</span></div></div>
</blockquote>
<blockquote class="quote" data-rv style="--d:.24s">
<p>I moved to Riverbend last year. Between the air-sensor feed and the 6 a.m. briefing, I feel plugged into this city already. It reads like a neighbor who did the homework.</p>
<div class="who"><img src="https://i.pravatar.cc/88?u=june-park" alt=""><div><b>June Park</b><span>Reader since 2023</span></div></div>
</blockquote>
</div>
</div>
</section>
<!-- ============ SUBSCRIBE ============ -->
<section id="subscribe" style="padding-top:0">
<div class="wrap">
<div class="plans-wrap" data-rv>
<div class="plans-head">
<p class="kick" style="justify-content:center">The Morning Isobar · 6:00 a.m. sharp</p>
<h2>Start with the briefing. Stay for the journalism.</h2>
<p>Every headline, verified overnight. Every forecast, scored against last night's observations. Delivered before your coffee is.</p>
<form class="nl-form" id="nlForm" novalidate>
<label for="nlEmail" class="skip">Email address</label>
<input type="email" id="nlEmail" placeholder="you@example.com" autocomplete="email">
<button class="btn solid" type="submit">Subscribe Free</button>
</form>
</div>
<div class="tiers">
<div class="tier" data-rv>
<h3>The Wire</h3>
<div class="price">Free</div>
<ul>
<li>Morning Isobar briefing, daily at 6 a.m.</li>
<li>Top headlines & verified forecast</li>
<li>Severe weather alerts</li>
<li>One archive story per month</li>
</ul>
<a class="btn" href="#subscribe">Start Free</a>
</div>
<div class="tier hot" data-rv style="--d:.08s">
<span class="ribbon">MOST READ</span>
<h3>Subscriber</h3>
<div class="price">$8<span>/MONTH</span></div>
<ul>
<li>Everything in The Wire</li>
<li>Full seven-year archive access</li>
<li>Radar Pro: 10-day model runs & alerts</li>
<li>Isobar Verify deep dives</li>
<li>Ad-free reading, everywhere</li>
</ul>
<a class="btn solid" href="#subscribe">Subscribe</a>
</div>
<div class="tier" data-rv style="--d:.16s">
<h3>Newsroom Circle</h3>
<div class="price">$15<span>/MONTH</span></div>
<ul>
<li>Everything in Subscriber</li>
<li>Friday editor's letter, from the masthead</li>
<li>Monthly corrections & methodology log</li>
<li>Invites to forecast Q&As & field trips</li>
</ul>
<a class="btn" href="#subscribe">Join the Circle</a>
</div>
</div>
</div>
</div>
</section>
<!-- ============ FAQ ============ -->
<section id="faq" style="padding-top:0">
<div class="wrap">
<div class="faq-grid">
<div class="faq-side">
<p class="kick" data-rv>Reader Desk</p>
<h2 class="lm" data-rv><span>Questions, answered like headlines: plainly.</span></h2>
<p data-rv style="--d:.1s">How we verify forecasts, what "Isobar Verified" means, and where to send a correction — the things readers ask us most.</p>
<div class="correction" data-rv style="--d:.15s">
<b>CORRECTION — JUNE 9, 2025:</b> An earlier version of today's lead story misstated the barrier's cost as $4.6B. The correct figure is $4.2B. We correct quickly and visibly. <a href="#faq" style="color:var(--red)">View the corrections log →</a>
</div>
</div>
<div class="faq-list" data-rv>
<div class="qa open">
<button class="qa-q" aria-expanded="true" aria-controls="qa1">How accurate are your forecasts — and how do you verify them?<span class="qa-ic" aria-hidden="true">+</span></button>
<div class="qa-a" id="qa1"><div class="qa-inner"><p>Our day-1 temperature forecasts scored 92.4% accuracy over the last twelve months, verified nightly against port-authority and airport observations — not our own gauges. Every forecast carries a published confidence rating, and the full verification spreadsheet is public each month on the Weather Desk page.</p></div></div>
</div>
<div class="qa">
<button class="qa-q" aria-expanded="false" aria-controls="qa2">What does the "Isobar Verified" seal mean?<span class="qa-ic" aria-hidden="true">+</span></button>
<div class="qa-a" id="qa2"><div class="qa-inner"><p>It means two independent fact-checkers confirmed every checkable claim before publication, with at least three sources for anything contested. The seal links to the receipts: documents, datasets and call logs that support the story.</p></div></div>
</div>
<div class="qa">
<button class="qa-q" aria-expanded="false" aria-controls="qa3">Is there a paywall?<span class="qa-ic" aria-hidden="true">+</span></button>
<div class="qa-a" id="qa3"><div class="qa-inner"><p>Core news, the morning briefing and all weather — including severe alerts — are always free. Subscriptions fund the archive, Radar Pro, and the deep investigations, and keep us independent of advertising pressure on our coverage.</p></div></div>
</div>
<div class="qa">
<button class="qa-q" aria-expanded="false" aria-controls="qa4">How do I report an error or send a news tip?<span class="qa-ic" aria-hidden="true">+</span></button>
<div class="qa-a" id="qa4"><div class="qa-inner"><p>Corrections: corrections@theisobar.news — we review every submission before the next edition. Tips: desk@theisobar.news, or our Signal handle <span class="mono">isobar-tips.88</span> for sensitive material. We never reveal a source, period.</p></div></div>
</div>
<div class="qa">
<button class="qa-q" aria-expanded="false" aria-controls="qa5">Can I republish your stories or data?<span class="qa-ic" aria-hidden="true">+</span></button>
<div class="qa-a" id="qa5"><div class="qa-inner"><p>Non-commercial and nonprofit outlets may republish under our open license with byline and link intact. Our datasets carry the same license — we'd rather see the flood map in a city council deck than gathering dust in a drawer.</p></div></div>
</div>
<div class="qa">
<button class="qa-q" aria-expanded="false" aria-controls="qa6">Do you send severe weather alerts?<span class="qa-ic" aria-hidden="true">+</span></button>
<div class="qa-a" id="qa6"><div class="qa-inner"><p>Yes — free, for everyone, on every plan. Configure thresholds by neighborhood (gale, surge, air quality, heat) and you'll hear from us only when it matters. Roughly four alerts per season, on average.</p></div></div>
</div>
</div>
</div>
</div>
</section>
</main>
<!-- ============ FOOTER ============ -->
<footer>
<div class="wrap">
<div class="f-main">
<div class="f-brand">
<div class="mast-logo" aria-hidden="true">
<svg viewBox="0 0 48 48" fill="none" stroke="currentColor" stroke-width="2"><circle cx="27" cy="21" r="6"/><circle cx="24" cy="24" r="13" stroke-dasharray="62 20"/><circle cx="21" cy="27" r="20" stroke-dasharray="94 32"/><circle cx="27" cy="21" r="2.6" fill="#cf3410" stroke="none"/></svg>
<span class="name">The Isobar</span>
</div>
<p>Independent news & weather for Harbor City. Reader-funded since 2019. Forecasts verified daily against NOAA & port-authority observations.</p>
<div class="socials">
<a href="#" aria-label="The Isobar on X"><svg viewBox="0 0 24 24"><path d="M18.9 2H22l-6.8 7.8L23.3 22h-6.3l-4.9-6.4L6.4 22H3.2l7.3-8.3L1 2h6.5l4.4 5.8L18.9 2zm-1.1 18h1.7L7.1 3.8H5.3L17.8 20z"/></svg></a>
<a href="#" aria-label="The Isobar on Instagram"><svg viewBox="0 0 24 24"><path d="M12 2.2c3.2 0 3.6 0 4.8.1 3.3.1 4.8 1.7 4.9 4.9.1 1.3.1 1.6.1 4.8s0 3.6-.1 4.8c-.1 3.2-1.6 4.8-4.9 4.9-1.2.1-1.6.1-4.8.1s-3.6 0-4.8-.1c-3.3-.1-4.8-1.7-4.9-4.9C2.2 15.6 2.2 15.2 2.2 12s0-3.6.1-4.8C2.4 4 3.9 2.4 7.2 2.3 8.4 2.2 8.8 2.2 12 2.2zm0 3.6a6.2 6.2 0 100 12.4 6.2 6.2 0 000-12.4zm0 10.2a4 4 0 110-8 4 4 0 010 8zm6.4-10.5a1.4 1.4 0 11-2.9 0 1.4 1.4 0 012.9 0z"/></svg></a>
<a href="#" aria-label="The Isobar on YouTube"><svg viewBox="0 0 24 24"><path d="M23.5 6.2a3 3 0 00-2.1-2.1C19.5 3.5 12 3.5 12 3.5s-7.5 0-9.4.6A3 3 0 00.5 6.2 31 31 0 000 12a31 31 0 00.5 5.8 3 3 0 002.1 2.1c1.9.6 9.4.6 9.4.6s7.5 0 9.4-.6a3 3 0 002.1-2.1A31 31 0 0024 12a31 31 0 00-.5-5.8zM9.5 15.6V8.4L15.8 12l-6.3 3.6z"/></svg></a>
<a href="#" aria-label="RSS feed"><svg viewBox="0 0 24 24"><path d="M4.3 17.4a2.3 2.3 0 110 4.6 2.3 2.3 0 010-4.6zM2 8.6V12a10 10 0 0110 10h3.4A13.4 13.4 0 002 8.6zM2 2v3.4A16.6 16.6 0 0118.6 22H22C22 10.9 13.1 2 2 2z"/></svg></a>
</div>
</div>
<div class="f-col">
<h4>NEWS</h4>
<ul><li><a href="#world">World Affairs</a></li><li><a href="#city">City & Community</a></li><li><a href="#business">Business</a></li><li><a href="#sports">Sports</a></li><li><a href="#culture">Culture</a></li><li><a href="#data">Data Desk</a></li></ul>
</div>
<div class="f-col">
<h4>WEATHER</h4>
<ul><li><a href="#weather">Live Radar</a></li><li><a href="#weather">Marine Forecast</a></li><li><a href="#weather">Severe Alerts</a></li><li><a href="#data">Climate Desk</a></li><li><a href="#data">Sensor Network</a></li></ul>
</div>
<div class="f-col">
<h4>COMPANY</h4>
<ul><li><a href="#trust">About the Masthead</a></li><li><a href="#faq">Corrections Log</a></li><li><a href="#archive">The Archive</a></li><li><a href="#subscribe">Careers</a></li><li><a href="#faq">Syndication</a></li></ul>
</div>
<div class="f-contact">
<b>Newsroom</b>417 Meridian Quay, Suite 9<br>Harbor City, HC 04102
<b>Contact</b>desk@theisobar.news<br>+1 (555) 014-2900
<b>Tips (secure)</b>Signal: isobar-tips.88
</div>
</div>
<div class="f-bottom">
<span>© 2025 The Isobar Media Group. All rights reserved. Independently owned, reader-funded.</span>
<span><a href="#">Privacy</a> · <a href="#">Terms</a> · <a href="#">Cookie Preferences</a> · <a href="#">Accessibility</a> · <a href="#">RSS</a></span>
</div>
</div>
</footer>
<script>
(function(){
"use strict";
const RM = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
const $ = (s,c)=> (c||document).querySelector(s);
const $$ = (s,c)=> Array.from((c||document).querySelectorAll(s));
/* ---- clock & date ---- */
const days=["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday"],
mons=["January","February","March","April","May","June","July","August","September","October","November","December"];
function tickClock(){
const d=new Date();
$("#clock").textContent = String(d.getHours()).padStart(2,"0")+":"+String(d.getMinutes()).padStart(2,"0")+":"+String(d.getSeconds()).padStart(2,"0");
}
(function(){const d=new Date();$("#today").textContent = days[d.getDay()]+", "+mons[d.getMonth()]+" "+d.getDate()+", "+d.getFullYear();})();
tickClock(); setInterval(tickClock,1000);
/* ---- masthead scramble-decode ---- */
(function(){
const el=$("#mastTitle"); if(!el) return;
const txt=el.dataset.text;
if(RM){ el.textContent=txt; return; }
const glyphs="▓▒░<>/=+#*"; let f=0;
const iv=setInterval(()=>{
f++;
el.textContent = txt.split("").map((c,i)=> i<f/1.7 ? c : (c===" "?" ":glyphs[(Math.random()*glyphs.length)|0])).join("");
if(f/1.7>=txt.length){clearInterval(iv);el.textContent=txt;}
},34);
})();
/* ---- reveal observer ---- */
const toReveal=$$("[data-rv]");
if(RM){ toReveal.forEach(el=>el.classList.add("on")); }
else{
const io=new IntersectionObserver(es=>es.forEach(e=>{ if(e.isIntersecting){ e.target.classList.add("on"); io.unobserve(e.target);} }),{threshold:.16,rootMargin:"0px 0px -6% 0px"});
toReveal.forEach(el=>io.observe(el));
}
/* ---- count-up stats ---- */
const counters=$$("[data-count]");
function runCount(el){
const end=parseFloat(el.dataset.count), dec=parseInt(el.dataset.dec||"0",10), t0=performance.now(), dur=1600;
function step(t){ const p=Math.min((t-t0)/dur,1), e=1-Math.pow(1-p,3), v=end*e;
el.textContent = dec? v.toFixed(dec) : Math.round(v).toLocaleString("en-US");
if(p<1) requestAnimationFrame(step); }
requestAnimationFrame(step);
}
if(RM){ counters.forEach(el=>{ const v=parseFloat(el.dataset.count); el.textContent = (el.dataset.dec? v.toFixed(1): Math.round(v).toLocaleString("en-US")); }); }
else{
const cio=new IntersectionObserver(es=>es.forEach(e=>{ if(e.isIntersecting){ runCount(e.target); cio.unobserve(e.target);} }),{threshold:.6});
counters.forEach(el=>cio.observe(el));
}
/* ---- nav stuck ---- */
const nav=$("#nav");
addEventListener("scroll",()=>nav.classList.toggle("stuck",scrollY>10),{passive:true});
/* ---- world scroller ---- */
const row=$("#worldRow");
$("#wPrev").addEventListener("click",()=>row.scrollBy({left:-364,behavior:RM?"auto":"smooth"}));
$("#wNext").addEventListener("click",()=>row.scrollBy({left:364,behavior:RM?"auto":"smooth"}));
/* ---- follow buttons ---- */
$$(".follow").forEach(b=>b.addEventListener("click",()=>{
const on=b.classList.toggle("on");
b.setAttribute("aria-pressed",on);
b.textContent = on ? "✓ Following Topic" : "+ Follow Topic";
}));
/* ---- FAQ accordion ---- */
$$(".qa").forEach(qa=>{
const btn=$(".qa-q",qa);
btn.addEventListener("click",()=>{
const open=qa.classList.contains("open");
$$(".qa").forEach(o=>{o.classList.remove("open");$(".qa-q",o).setAttribute("aria-expanded","false");});
if(!open){ qa.classList.add("open"); btn.setAttribute("aria-expanded","true"); }
});
});
/* ---- newsletter ---- */
$("#nlForm").addEventListener("submit",e=>{
e.preventDefault();
const form=e.target, email=$("#nlEmail").value.trim();
if(!/^[^@\s]+@[^@\s]+\.[^@\s]+$/.test(email)){ form.classList.remove("err"); void form.offsetWidth; form.classList.add("err"); $("#nlEmail").focus(); return; }
form.outerHTML='<p class="nl-ok">✓ CHECK YOUR INBOX — first dispatch lands at 6:00 a.m. sharp. Welcome to the record.</p>';
});
/* ================= FORECAST LAB ================= */
const STATIONS={
harborfront:{name:"Harborfront",sub:"Pier 4 · Coast",temp:57,feels:54,cond:"Light fog",windDir:68,windSpd:9,gust:16,hum:92,press:29.91,pressDelta:-0.12,vis:"2.1 mi",aqi:31,
spark:[30.03,30.01,29.99,29.97,29.96,29.94,29.92,29.91],
days:[["THU","STM",61,49],["FRI","GLE",58,47],["SAT","SHW",60,46],["SUN","CLD",64,50],["MON","SUN",68,52],["TUE","SUN",71,54],["WED","CLD",69,53]]},
midland:{name:"Midland Hts.",sub:"Ridge · 240 ft",temp:54,feels:51,cond:"Overcast",windDir:45,windSpd:12,gust:21,hum:84,press:29.88,pressDelta:-0.18,vis:"6 mi",aqi:24,
spark:[30.06,30.02,29.99,29.95,29.93,29.91,29.89,29.88],
days:[["THU","STM",59,47],["FRI","GLE",56,45],["SAT","SHW",58,44],["SUN","CLD",62,48],["MON","SUN",66,50],["TUE","SUN",69,52],["WED","CLD",67,51]]},
riverbend:{name:"Riverbend",sub:"Delta · Inland",temp:61,feels:61,cond:"Hazy sun",windDir:110,windSpd:6,gust:11,hum:68,press:29.96,pressDelta:-0.05,vis:"8 mi",aqi:57,
spark:[30.02,30.01,30.0,29.99,29.99,29.98,29.97,29.96],
days:[["THU","STM",66,52],["FRI","SHW",63,50],["SAT","CLD",65,49],["SUN","SUN",70,53],["MON","SUN",74,55],["TUE","SUN",76,57],["WED","CLD",73,55]]},
airfield:{name:"N. Airfield",sub:"HCX · Runway 9",temp:58,feels:55,cond:"Breezy, clear",windDir:30,windSpd:15,gust:26,hum:74,press:29.89,pressDelta:-0.21,vis:"10 mi",aqi:19,
spark:[30.10,30.05,30.01,29.98,29.95,29.93,29.91,29.89],
days:[["THU","GLE",60,48],["FRI","GLE",57,46],["SAT","SHW",59,45],["SUN","CLD",63,49],["MON","SUN",67,51],["TUE","SUN",70,53],["WED","SUN",71,54]]}
};
let cur="harborfront", unit="F";
const DIRS=["N","NNE","NE","ENE","E","ESE","SE","SSE","S","SSW","SW","WSW","W","WNW","NW","NNW"];
const dirName=d=>DIRS[Math.round(d/22.5)%16];
const fmtT=f=> unit==="F"? Math.round(f) : Math.round((f-32)*5/9);
function buildStations(){
const box=$("#stations"); box.innerHTML="";
Object.entries(STATIONS).forEach(([key,s])=>{
const b=document.createElement("button");
b.className="st-btn"+(key===cur?" on":""); b.dataset.st=key;
b.setAttribute("aria-pressed",key===cur);
b.innerHTML='<span class="n">'+s.name+'</span><span class="t">'+fmtT(s.temp)+'°</span><span class="c">'+s.cond.toUpperCase()+'</span>';
b.addEventListener("click",()=>{ cur=key; refresh(true); });
box.appendChild(b);
});
}
function sparkPoints(arr){
const w=280,h=44,min=Math.min(...arr),max=Math.max(...arr),rng=(max-min)||1;
return arr.map((v,i)=>{
const x=(i/(arr.length-1))*w;
const y=h-6-((v-min)/rng)*(h-14);
return x.toFixed(1)+","+y.toFixed(1);
}).join(" ");
}
function refresh(swap){
const s=STATIONS[cur];
const panel=$("#nowPanel");
const paint=()=>{
$("#nowTemp").textContent=fmtT(s.temp);
$("#nowUnit").textContent="°"+unit;
$("#nowCond").textContent=s.cond;
$("#nowFeels").textContent="Feels like "+fmtT(s.feels)+"° · Dew point "+fmtT(s.temp-2)+"°";
$("#windVal").textContent=s.windSpd+" kt "+dirName(s.windDir);
$("#gustVal").textContent=s.gust+" kt";
$("#humVal").textContent=s.hum+"%";
$("#pressVal").textContent=s.press.toFixed(2);
$("#pressTrend").textContent=s.pressDelta<0?"▼":"▲";
$("#pressTrend").style.color=s.pressDelta<0?"#ff8563":"#57e6ac";
$("#visVal").textContent=s.vis;
const aqi=$("#aqiVal");
aqi.textContent=s.aqi+" · "+(s.aqi<=50?"GOOD":"MODERATE");
aqi.className=s.aqi<=50?"aqi-good":"aqi-mid";
$("#pressDelta").textContent=(s.pressDelta<0?"−":"+")+Math.abs(s.pressDelta).toFixed(2)+" inHg";
$("#windArrow").style.transform="rotate("+(s.windDir+180)+"deg)";
const spark=$("#sparkline"); spark.setAttribute("points",sparkPoints(s.spark));
if(swap){ spark.style.strokeDashoffset=400; requestAnimationFrame(()=>requestAnimationFrame(()=>spark.style.strokeDashoffset=0)); }
/* week */
const wk=$("#weekStrip"); wk.innerHTML="";
const allHi=s.days.map(d=>d[2]), allLo=s.days.map(d=>d[3]);
const wMin=Math.min(...allLo), wMax=Math.max(...allHi);
s.days.forEach(d=>{
const el=document.createElement("div"); el.className="day";
const l=((d[3]-wMin)/(wMax-wMin))*100, w=((d[2]-d[3])/(wMax-wMin))*100;
el.innerHTML='<div class="d">'+d[0]+'</div><div class="code '+d[1].toLowerCase()+'">'+d[1]+'</div>'+
'<div class="hi">'+fmtT(d[2])+'°</div><div class="lo">'+fmtT(d[3])+'°</div>'+
'<div class="bar"><i style="left:'+l.toFixed(0)+'%;width:'+Math.max(w,6).toFixed(0)+'%"></i></div>';
wk.appendChild(el);
});
buildStations();
};
if(swap && !RM){
panel.classList.add("tick");
setTimeout(()=>{ paint(); panel.classList.remove("tick"); },240);
} else paint();
}
$("#uF").addEventListener("click",()=>{ unit="F"; $("#uF").classList.add("on"); $("#uC").classList.remove("on"); $("#uF").setAttribute("aria-pressed","true"); $("#uC").setAttribute("aria-pressed","false"); refresh(false); });
$("#uC").addEventListener("click",()=>{ unit="C"; $("#uC").classList.add("on"); $("#uF").classList.remove("on"); $("#uC").setAttribute("aria-pressed","true"); $("#uF").setAttribute("aria-pressed","false"); refresh(false); });
$$(".radar-head .mode button").forEach(b=>b.addEventListener("click",()=>{
$$(".radar-head .mode button").forEach(x=>x.classList.remove("on"));
b.classList.add("on");
$("#radarBox").dataset.mode=b.dataset.mode;
}));
/* radar age countdown */
let age=38;
setInterval(()=>{ age--; if(age<=0){age=45;} $("#radarAge").textContent=age; },1000);
refresh(false);
})();
</script>
</body>
</html>
View Axe Report (JSON)
{
"testEngine": {
"name": "axe-core",
"version": "4.10.2"
},
"testRunner": {
"name": "axe"
},
"testEnvironment": {
"userAgent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) HeadlessChrome/156.0.8078.4 Safari/537.36",
"windowWidth": 1280,
"windowHeight": 720,
"orientationAngle": 0,
"orientationType": "landscape-primary"
},
"timestamp": "2026-11-12T10:01:06.664Z",
"url": "https://benchmark.aimac.invalid/62f8a527ec36dff96d8601ab514613255a250c88d012b6fe8e200599eae62729.html",
"toolOptions": {
"runOnly": {
"type": "tag",
"values": [
"wcag2a",
"wcag2aa",
"wcag21a",
"wcag21aa",
"wcag22a",
"wcag22aa"
]
},
"resultTypes": [
"violations"
],
"reporter": "v1"
},
"inapplicable": [
{
"id": "area-alt",
"impact": null,
"tags": [
"cat.text-alternatives",
"wcag2a",
"wcag244",
"wcag412",
"section508",
"section508.22.a",
"TTv5",
"TT6.a",
"EN-301-549",
"EN-9.2.4.4",
"EN-9.4.1.2",
"ACT"
],
"description": "Ensure <area> elements of image maps have alternative text",
"help": "Active <area> elements must have alternative text",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/area-alt?application=axeAPI",
"nodes": []
},
{
"id": "aria-braille-equivalent",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag412",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure aria-braillelabel and aria-brailleroledescription have a non-braille equivalent",
"help": "aria-braille attributes must have a non-braille equivalent",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-braille-equivalent?application=axeAPI",
"nodes": []
},
{
"id": "aria-command-name",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag412",
"TTv5",
"TT6.a",
"EN-301-549",
"EN-9.4.1.2",
"ACT"
],
"description": "Ensure every ARIA button, link and menuitem has an accessible name",
"help": "ARIA commands must have an accessible name",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-command-name?application=axeAPI",
"nodes": []
},
{
"id": "aria-input-field-name",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag412",
"TTv5",
"TT5.c",
"EN-301-549",
"EN-9.4.1.2",
"ACT"
],
"description": "Ensure every ARIA input field has an accessible name",
"help": "ARIA input fields must have an accessible name",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-input-field-name?application=axeAPI",
"nodes": []
},
{
"id": "aria-meter-name",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag111",
"EN-301-549",
"EN-9.1.1.1"
],
"description": "Ensure every ARIA meter node has an accessible name",
"help": "ARIA meter nodes must have an accessible name",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-meter-name?application=axeAPI",
"nodes": []
},
{
"id": "aria-progressbar-name",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag111",
"EN-301-549",
"EN-9.1.1.1"
],
"description": "Ensure every ARIA progressbar node has an accessible name",
"help": "ARIA progressbar nodes must have an accessible name",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-progressbar-name?application=axeAPI",
"nodes": []
},
{
"id": "aria-required-children",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag131",
"EN-301-549",
"EN-9.1.3.1"
],
"description": "Ensure elements with an ARIA role that require child roles contain them",
"help": "Certain ARIA roles must contain particular children",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-required-children?application=axeAPI",
"nodes": []
},
{
"id": "aria-required-parent",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag131",
"EN-301-549",
"EN-9.1.3.1"
],
"description": "Ensure elements with an ARIA role that require parent roles are contained by them",
"help": "Certain ARIA roles must be contained by particular parents",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-required-parent?application=axeAPI",
"nodes": []
},
{
"id": "aria-toggle-field-name",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag412",
"TTv5",
"TT5.c",
"EN-301-549",
"EN-9.4.1.2",
"ACT"
],
"description": "Ensure every ARIA toggle field has an accessible name",
"help": "ARIA toggle fields must have an accessible name",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-toggle-field-name?application=axeAPI",
"nodes": []
},
{
"id": "aria-tooltip-name",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag412",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure every ARIA tooltip node has an accessible name",
"help": "ARIA tooltip nodes must have an accessible name",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-tooltip-name?application=axeAPI",
"nodes": []
},
{
"id": "blink",
"impact": null,
"tags": [
"cat.time-and-media",
"wcag2a",
"wcag222",
"section508",
"section508.22.j",
"TTv5",
"TT2.b",
"EN-301-549",
"EN-9.2.2.2"
],
"description": "Ensure <blink> elements are not used",
"help": "<blink> elements are deprecated and must not be used",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/blink?application=axeAPI",
"nodes": []
},
{
"id": "definition-list",
"impact": null,
"tags": [
"cat.structure",
"wcag2a",
"wcag131",
"EN-301-549",
"EN-9.1.3.1"
],
"description": "Ensure <dl> elements are structured correctly",
"help": "<dl> elements must only directly contain properly-ordered <dt> and <dd> groups, <script>, <template> or <div> elements",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/definition-list?application=axeAPI",
"nodes": []
},
{
"id": "dlitem",
"impact": null,
"tags": [
"cat.structure",
"wcag2a",
"wcag131",
"EN-301-549",
"EN-9.1.3.1"
],
"description": "Ensure <dt> and <dd> elements are contained by a <dl>",
"help": "<dt> and <dd> elements must be contained by a <dl>",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/dlitem?application=axeAPI",
"nodes": []
},
{
"id": "frame-focusable-content",
"impact": null,
"tags": [
"cat.keyboard",
"wcag2a",
"wcag211",
"TTv5",
"TT4.a",
"EN-301-549",
"EN-9.2.1.1"
],
"description": "Ensure <frame> and <iframe> elements with focusable content do not have tabindex=-1",
"help": "Frames with focusable content must not have tabindex=-1",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/frame-focusable-content?application=axeAPI",
"nodes": []
},
{
"id": "frame-title-unique",
"impact": null,
"tags": [
"cat.text-alternatives",
"wcag2a",
"wcag412",
"TTv5",
"TT12.d",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure <iframe> and <frame> elements contain a unique title attribute",
"help": "Frames must have a unique title attribute",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/frame-title-unique?application=axeAPI",
"nodes": []
},
{
"id": "frame-title",
"impact": null,
"tags": [
"cat.text-alternatives",
"wcag2a",
"wcag412",
"section508",
"section508.22.i",
"TTv5",
"TT12.d",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure <iframe> and <frame> elements have an accessible name",
"help": "Frames must have an accessible name",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/frame-title?application=axeAPI",
"nodes": []
},
{
"id": "html-xml-lang-mismatch",
"impact": null,
"tags": [
"cat.language",
"wcag2a",
"wcag311",
"EN-301-549",
"EN-9.3.1.1",
"ACT"
],
"description": "Ensure that HTML elements with both valid lang and xml:lang attributes agree on the base language of the page",
"help": "HTML elements with lang and xml:lang must have the same base language",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/html-xml-lang-mismatch?application=axeAPI",
"nodes": []
},
{
"id": "input-button-name",
"impact": null,
"tags": [
"cat.name-role-value",
"wcag2a",
"wcag412",
"section508",
"section508.22.a",
"TTv5",
"TT5.c",
"EN-301-549",
"EN-9.4.1.2",
"ACT"
],
"description": "Ensure input buttons have discernible text",
"help": "Input buttons must have discernible text",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/input-button-name?application=axeAPI",
"nodes": []
},
{
"id": "input-image-alt",
"impact": null,
"tags": [
"cat.text-alternatives",
"wcag2a",
"wcag111",
"wcag412",
"section508",
"section508.22.a",
"TTv5",
"TT7.a",
"EN-301-549",
"EN-9.1.1.1",
"EN-9.4.1.2",
"ACT"
],
"description": "Ensure <input type=\"image\"> elements have alternative text",
"help": "Image buttons must have alternative text",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/input-image-alt?application=axeAPI",
"nodes": []
},
{
"id": "marquee",
"impact": null,
"tags": [
"cat.parsing",
"wcag2a",
"wcag222",
"TTv5",
"TT2.b",
"EN-301-549",
"EN-9.2.2.2"
],
"description": "Ensure <marquee> elements are not used",
"help": "<marquee> elements are deprecated and must not be used",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/marquee?application=axeAPI",
"nodes": []
},
{
"id": "meta-refresh",
"impact": null,
"tags": [
"cat.time-and-media",
"wcag2a",
"wcag221",
"TTv5",
"TT8.a",
"EN-301-549",
"EN-9.2.2.1"
],
"description": "Ensure <meta http-equiv=\"refresh\"> is not used for delayed refresh",
"help": "Delayed refresh under 20 hours must not be used",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/meta-refresh?application=axeAPI",
"nodes": []
},
{
"id": "object-alt",
"impact": null,
"tags": [
"cat.text-alternatives",
"wcag2a",
"wcag111",
"section508",
"section508.22.a",
"EN-301-549",
"EN-9.1.1.1"
],
"description": "Ensure <object> elements have alternative text",
"help": "<object> elements must have alternative text",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/object-alt?application=axeAPI",
"nodes": []
},
{
"id": "role-img-alt",
"impact": null,
"tags": [
"cat.text-alternatives",
"wcag2a",
"wcag111",
"section508",
"section508.22.a",
"TTv5",
"TT7.a",
"EN-301-549",
"EN-9.1.1.1",
"ACT"
],
"description": "Ensure [role=\"img\"] elements have alternative text",
"help": "[role=\"img\"] elements must have an alternative text",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/role-img-alt?application=axeAPI",
"nodes": []
},
{
"id": "select-name",
"impact": null,
"tags": [
"cat.forms",
"wcag2a",
"wcag412",
"section508",
"section508.22.n",
"TTv5",
"TT5.c",
"EN-301-549",
"EN-9.4.1.2",
"ACT"
],
"description": "Ensure select element has an accessible name",
"help": "Select element must have an accessible name",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/select-name?application=axeAPI",
"nodes": []
},
{
"id": "server-side-image-map",
"impact": null,
"tags": [
"cat.text-alternatives",
"wcag2a",
"wcag211",
"section508",
"section508.22.f",
"TTv5",
"TT4.a",
"EN-301-549",
"EN-9.2.1.1"
],
"description": "Ensure that server-side image maps are not used",
"help": "Server-side image maps must not be used",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/server-side-image-map?application=axeAPI",
"nodes": []
},
{
"id": "summary-name",
"impact": null,
"tags": [
"cat.name-role-value",
"wcag2a",
"wcag412",
"section508",
"section508.22.a",
"TTv5",
"TT6.a",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure summary elements have discernible text",
"help": "Summary elements must have discernible text",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/summary-name?application=axeAPI",
"nodes": []
},
{
"id": "svg-img-alt",
"impact": null,
"tags": [
"cat.text-alternatives",
"wcag2a",
"wcag111",
"section508",
"section508.22.a",
"TTv5",
"TT7.a",
"EN-301-549",
"EN-9.1.1.1",
"ACT"
],
"description": "Ensure <svg> elements with an img, graphics-document or graphics-symbol role have an accessible text",
"help": "<svg> elements with an img role must have an alternative text",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/svg-img-alt?application=axeAPI",
"nodes": []
},
{
"id": "valid-lang",
"impact": null,
"tags": [
"cat.language",
"wcag2aa",
"wcag312",
"TTv5",
"TT11.b",
"EN-301-549",
"EN-9.3.1.2",
"ACT"
],
"description": "Ensure lang attributes have valid values",
"help": "lang attribute must have a valid value",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/valid-lang?application=axeAPI",
"nodes": []
},
{
"id": "video-caption",
"impact": null,
"tags": [
"cat.text-alternatives",
"wcag2a",
"wcag122",
"section508",
"section508.22.a",
"TTv5",
"TT17.a",
"EN-301-549",
"EN-9.1.2.2"
],
"description": "Ensure <video> elements have captions",
"help": "<video> elements must have captions",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/video-caption?application=axeAPI",
"nodes": []
},
{
"id": "no-autoplay-audio",
"impact": null,
"tags": [
"cat.time-and-media",
"wcag2a",
"wcag142",
"TTv5",
"TT2.a",
"EN-301-549",
"EN-9.1.4.2",
"ACT"
],
"description": "Ensure <video> or <audio> elements do not autoplay audio for more than 3 seconds without a control mechanism to stop or mute the audio",
"help": "<video> or <audio> elements must not play automatically",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/no-autoplay-audio?application=axeAPI",
"nodes": []
}
],
"passes": [
{
"id": "aria-allowed-attr",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag412",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure an element's role supports its ARIA attributes",
"help": "Elements must only use supported ARIA attributes",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-allowed-attr?application=axeAPI",
"nodes": [
{
"any": [],
"all": [
{
"id": "aria-allowed-attr",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "ARIA attributes are used correctly for the defined role"
}
],
"none": [
{
"id": "aria-unsupported-attr",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "ARIA attribute is supported"
}
],
"impact": null,
"html": "<nav class=\"nav\" id=\"nav\" aria-label=\"Primary\">",
"target": [
"#nav"
]
}
]
},
{
"id": "aria-conditional-attr",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag412",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure ARIA attributes are used as described in the specification of the element's role",
"help": "ARIA attributes must be used as specified for the element's role",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-conditional-attr?application=axeAPI",
"nodes": [
{
"any": [],
"all": [
{
"id": "aria-conditional-attr",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "ARIA attribute is allowed"
}
],
"none": [],
"impact": null,
"html": "<nav class=\"nav\" id=\"nav\" aria-label=\"Primary\">",
"target": [
"#nav"
]
}
]
},
{
"id": "aria-deprecated-role",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag412",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure elements do not use deprecated roles",
"help": "Deprecated ARIA roles must not be used",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-deprecated-role?application=axeAPI",
"nodes": [
{
"any": [],
"all": [],
"none": [
{
"id": "deprecatedrole",
"data": null,
"relatedNodes": [],
"impact": "minor",
"message": "ARIA role is not deprecated"
}
],
"impact": null,
"html": "<div class=\"util\" role=\"banner\">",
"target": [
".util"
]
}
]
},
{
"id": "aria-hidden-body",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag131",
"wcag412",
"EN-301-549",
"EN-9.1.3.1",
"EN-9.4.1.2"
],
"description": "Ensure aria-hidden=\"true\" is not present on the document body.",
"help": "aria-hidden=\"true\" must not be present on the document body",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-hidden-body?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "aria-hidden-body",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "No aria-hidden attribute is present on document body"
}
],
"all": [],
"none": [],
"impact": null,
"html": "<body>",
"target": [
"body"
]
}
]
},
{
"id": "aria-hidden-focus",
"impact": null,
"tags": [
"cat.name-role-value",
"wcag2a",
"wcag412",
"TTv5",
"TT6.a",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure aria-hidden elements are not focusable nor contain focusable elements",
"help": "ARIA hidden element must not be focusable or contain focusable elements",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-hidden-focus?application=axeAPI",
"nodes": [
{
"any": [],
"all": [
{
"id": "focusable-modal-open",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "No focusable elements while a modal is open"
},
{
"id": "focusable-disabled",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "No focusable elements contained within element"
},
{
"id": "focusable-not-tabbable",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "No focusable elements contained within element"
}
],
"none": [],
"impact": null,
"html": "<div class=\"grain\" aria-hidden=\"true\"></div>",
"target": [
".grain"
]
}
]
},
{
"id": "aria-prohibited-attr",
"impact": "serious",
"tags": [
"cat.aria",
"wcag2a",
"wcag412",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure ARIA attributes are not prohibited for an element's role",
"help": "Elements must only use permitted ARIA attributes",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-prohibited-attr?application=axeAPI",
"nodes": [
{
"any": [],
"all": [],
"none": [
{
"id": "aria-prohibited-attr",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "ARIA attribute is allowed"
}
],
"impact": null,
"html": "<nav class=\"nav\" id=\"nav\" aria-label=\"Primary\">",
"target": [
"#nav"
]
}
]
},
{
"id": "aria-required-attr",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag412",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure elements with ARIA roles have all required ARIA attributes",
"help": "Required ARIA attributes must be provided",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-required-attr?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "aria-required-attr",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "All required ARIA attributes are present"
}
],
"all": [],
"none": [],
"impact": null,
"html": "<div class=\"util\" role=\"banner\">",
"target": [
".util"
]
}
]
},
{
"id": "aria-roles",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag412",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure all elements with a role attribute use a valid value",
"help": "ARIA roles used must conform to valid values",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-roles?application=axeAPI",
"nodes": [
{
"any": [],
"all": [],
"none": [
{
"id": "invalidrole",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "ARIA role is valid"
},
{
"id": "abstractrole",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "Abstract roles are not used"
},
{
"id": "unsupportedrole",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "ARIA role is supported"
}
],
"impact": null,
"html": "<div class=\"util\" role=\"banner\">",
"target": [
".util"
]
}
]
},
{
"id": "aria-valid-attr-value",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag412",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure all ARIA attributes have valid values",
"help": "ARIA attributes must conform to valid values",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-valid-attr-value?application=axeAPI",
"nodes": [
{
"any": [],
"all": [
{
"id": "aria-valid-attr-value",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "ARIA attribute values are valid"
},
{
"id": "aria-errormessage",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "aria-errormessage exists and references elements visible to screen readers that use a supported aria-errormessage technique"
},
{
"id": "aria-level",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "aria-level values are valid"
}
],
"none": [],
"impact": null,
"html": "<nav class=\"nav\" id=\"nav\" aria-label=\"Primary\">",
"target": [
"#nav"
]
}
]
},
{
"id": "aria-valid-attr",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag412",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure attributes that begin with aria- are valid ARIA attributes",
"help": "ARIA attributes must conform to valid names",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-valid-attr?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "aria-valid-attr",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "ARIA attribute name is valid"
}
],
"all": [],
"none": [],
"impact": null,
"html": "<nav class=\"nav\" id=\"nav\" aria-label=\"Primary\">",
"target": [
"#nav"
]
}
]
},
{
"id": "autocomplete-valid",
"impact": null,
"tags": [
"cat.forms",
"wcag21aa",
"wcag135",
"EN-301-549",
"EN-9.1.3.5",
"ACT"
],
"description": "Ensure the autocomplete attribute is correct and suitable for the form field",
"help": "autocomplete attribute must be used correctly",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/autocomplete-valid?application=axeAPI",
"nodes": [
{
"any": [],
"all": [
{
"id": "autocomplete-valid",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "the autocomplete attribute is correctly formatted"
}
],
"none": [],
"impact": null,
"html": "<input type=\"email\" id=\"nlEmail\" placeholder=\"you@example.com\" autocomplete=\"email\">",
"target": [
"#nlEmail"
]
}
]
},
{
"id": "avoid-inline-spacing",
"impact": null,
"tags": [
"cat.structure",
"wcag21aa",
"wcag1412",
"EN-301-549",
"EN-9.1.4.12",
"ACT"
],
"description": "Ensure that text spacing set through style attributes can be adjusted with custom stylesheets",
"help": "Inline text spacing must be adjustable with custom stylesheets",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/avoid-inline-spacing?application=axeAPI",
"nodes": [
{
"any": [],
"all": [
{
"id": "important-letter-spacing",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "Letter-spacing in the style attribute is not set to !important, or meets the minimum"
},
{
"id": "important-word-spacing",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "word-spacing in the style attribute is not set to !important, or meets the minimum"
},
{
"id": "important-line-height",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "line-height in the style attribute is not set to !important, or meets the minimum"
}
],
"none": [],
"impact": null,
"html": "<section id=\"world\" style=\"padding-top:0\">",
"target": [
"#world"
]
}
]
},
{
"id": "button-name",
"impact": null,
"tags": [
"cat.name-role-value",
"wcag2a",
"wcag412",
"section508",
"section508.22.a",
"TTv5",
"TT6.a",
"EN-301-549",
"EN-9.4.1.2",
"ACT"
],
"description": "Ensure buttons have discernible text",
"help": "Buttons must have discernible text",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/button-name?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "button-has-visible-text",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "Element has inner text that is visible to screen readers"
}
],
"all": [],
"none": [],
"impact": null,
"html": "<button id=\"uF\" class=\"on\" aria-pressed=\"true\">\u00b0F</button>",
"target": [
"#uF"
]
}
]
},
{
"id": "bypass",
"impact": null,
"tags": [
"cat.keyboard",
"wcag2a",
"wcag241",
"section508",
"section508.22.o",
"TTv5",
"TT9.a",
"EN-301-549",
"EN-9.2.4.1"
],
"description": "Ensure each page has at least one mechanism for a user to bypass navigation and jump straight to the content",
"help": "Page must have means to bypass repeated blocks",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/bypass?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "internal-link-present",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "Valid skip link found"
},
{
"id": "header-present",
"data": null,
"relatedNodes": [
{
"html": "<h1 class=\"mast-title\"><span class=\"word\" id=\"mastTitle\" data-text=\"The Isobar\">The Isobar</span></h1>",
"target": [
".mast-title"
]
},
{
"html": "<h1 class=\"lm on\" data-rv=\"\"><span>Harbor City approves $4.2B Meridian Barrier; construction begins in the spring</span></h1>",
"target": [
".lead > h1"
]
},
{
"html": "<h3 class=\"hl\"><a href=\"#data\">Isobar Verify: five claims from last night's barrier debate, checked</a></h3>",
"target": [
".on > .hl"
]
},
{
"html": "<h3 class=\"hl\"><a href=\"#city\">Line 3 fare-free pilot begins Saturday</a></h3>",
"target": [
"li:nth-child(2) > .hl"
]
},
{
"html": "<h3 class=\"hl\"><a href=\"#business\">Port futures climb on tariff pause</a></h3>",
"target": [
"li:nth-child(3) > .hl"
]
},
{
"html": "<h3 class=\"hl\"><a href=\"#weather\">Gale watch for Thursday</a></h3>",
"target": [
"li:nth-child(4) > .hl"
]
},
{
"html": "<h3 class=\"hl\"><a href=\"#sports\">Harborhawks punch October ticket</a></h3>",
"target": [
"li:nth-child(5) > .hl"
]
},
{
"html": "<h3 class=\"hl\"><a href=\"#data\">Air sensor network reaches 140 nodes</a></h3>",
"target": [
"li:nth-child(6) > .hl"
]
},
{
"html": "<h3 class=\"hl\"><a href=\"#sports\">Overtime, again: Harborhawks seize the East's final playoff seat</a></h3>",
"target": [
"#sports > .hl"
]
},
{
"html": "<h3 class=\"hl\"><a href=\"#business\">Tariff pause lifts port futures; pilots call the rally \"paper optimism\"</a></h3>",
"target": [
"#business > .hl"
]
},
{
"html": "<h3 class=\"hl\"><a href=\"#archive\">June 10, 1987 \u2014 the flood that drew the city's first isobars</a></h3>",
"target": [
"#archive > .hl"
]
},
{
"html": "<h2 class=\"lm\" data-rv=\"\"><span>The Forecast Lab</span></h2>",
"target": [
"#weather > .wrap > .sec-head > div > h2"
]
},
{
"html": "<h4>GALE WATCH \u2014 COASTAL HARBOR CITY</h4>",
"target": [
".alert > div > h4"
]
},
{
"html": "<h2 class=\"lm\" data-rv=\"\"><span>Journalism that shows its receipts.</span></h2>",
"target": [
".dd-left > h2"
]
},
{
"html": "<h3 class=\"hl\"><a href=\"#data\">Counting the heat: forty years of Harbor City summers, night by night</a></h3>",
"target": [
".dcard:nth-child(1) > .tx > .hl"
]
},
{
"html": "<h3 class=\"hl\"><a href=\"#data\">Where the flood money went: mapping 213 projects, block by block</a></h3>",
"target": [
".dcard:nth-child(2) > .tx > .hl"
]
},
{
"html": "<h3 class=\"hl\"><a href=\"#data\">The Commute Index: delay, line by line, measured ourselves</a></h3>",
"target": [
".dcard:nth-child(3) > .tx > .hl"
]
},
{
"html": "<h3 class=\"hl\"><a href=\"#data\">Sensor city: what 140 air monitors say about your block</a></h3>",
"target": [
".dcard:nth-child(4) > .tx > .hl"
]
},
{
"html": "<h2 class=\"lm\" data-rv=\"\"><span>The world, <em>from the harbor.</em></span></h2>",
"target": [
"#world > .wrap > .sec-head > div:nth-child(1) > h2"
]
},
{
"html": "<h3 class=\"hl\"><a href=\"#world\">Cease-fire talks resume in Geneva as monitors log the quietest week in months</a></h3>",
"target": [
".wcard:nth-child(1) > .tx > .hl"
]
},
{
"html": "<h3 class=\"hl\"><a href=\"#world\">Nairobi's tech corridor races to build Africa's first grid-scale battery</a></h3>",
"target": [
".wcard:nth-child(2) > .tx > .hl"
]
},
{
"html": "<h3 class=\"hl\"><a href=\"#world\">Osaka's typhoon warning system becomes a model for coastal megacities</a></h3>",
"target": [
".wcard:nth-child(3) > .tx > .hl"
]
},
{
"html": "<h3 class=\"hl\"><a href=\"#world\">S\u00e3o Paulo pilots open-source ballot audits with citizen observers</a></h3>",
"target": [
".wcard:nth-child(4) > .tx > .hl"
]
},
{
"html": "<h3 class=\"hl\"><a href=\"#world\">The northern lane opens early \u2014 and insurers are rewriting the map</a></h3>",
"target": [
".wcard:nth-child(5) > .tx > .hl"
]
},
{
"html": "<h2 class=\"lm\" data-rv=\"\"><span>Field notes, pinned to the desk.</span></h2>",
"target": [
"#culture > .wrap > .sec-head > div > h2"
]
},
{
"html": "<h2 class=\"lm\" data-rv=\"\"><span>The Bulletin.</span></h2>",
"target": [
"#city > .wrap > .sec-head > div > h2"
]
},
{
"html": "<h3 class=\"hl\"><a href=\"#city\">Riverbend farmers market goes year-round after record winter turnout</a></h3>",
"target": [
".bull-item:nth-child(1) > div > .hl"
]
},
{
"html": "<h3 class=\"hl\"><a href=\"#city\">School board approves rooftop solar for twelve campuses \u2014 students will read the meters</a></h3>",
"target": [
".bull-item:nth-child(2) > div > .hl"
]
},
{
"html": "<h3 class=\"hl\"><a href=\"#city\">Fare-free weekends on Line 3 begin Saturday \u2014 here's what we'll be measuring</a></h3>",
"target": [
".bull-item:nth-child(3) > div > .hl"
]
},
{
"html": "<h4>Outer Harbor Cleanup \u2014 volunteer call</h4>",
"target": [
"li:nth-child(1) > div > h4"
]
},
{
"html": "<h4>Live Forecast Q&A with the Weather Desk</h4>",
"target": [
"li:nth-child(2) > div > h4"
]
},
{
"html": "<h4>Solstice Festival \u2014 photo desk open studio</h4>",
"target": [
"li:nth-child(3) > div > h4"
]
},
{
"html": "<h2 class=\"lm\" data-rv=\"\"><span>Trust is our only <em>currency.</em></span></h2>",
"target": [
"#trust > .wrap > .sec-head > div > h2"
]
},
{
"html": "<h2>Start with the briefing. Stay for the journalism.</h2>",
"target": [
".plans-head > h2"
]
},
{
"html": "<h3>The Wire</h3>",
"target": [
".tier[data-rv=\"\"]:nth-child(1) > h3"
]
},
{
"html": "<h3>Subscriber</h3>",
"target": [
".hot > h3"
]
},
{
"html": "<h3>Newsroom Circle</h3>",
"target": [
".tier[data-rv=\"\"]:nth-child(3) > h3"
]
},
{
"html": "<h2 class=\"lm\" data-rv=\"\"><span>Questions, answered like headlines: plainly.</span></h2>",
"target": [
".faq-side > h2"
]
},
{
"html": "<h4>NEWS</h4>",
"target": [
".f-col:nth-child(2) > h4"
]
},
{
"html": "<h4>WEATHER</h4>",
"target": [
".f-col:nth-child(3) > h4"
]
},
{
"html": "<h4>COMPANY</h4>",
"target": [
".f-col:nth-child(4) > h4"
]
}
],
"impact": "serious",
"message": "Page has a heading"
},
{
"id": "landmark",
"data": null,
"relatedNodes": [
{
"html": "<main id=\"front\">",
"target": [
"#front"
]
}
],
"impact": "serious",
"message": "Page has a landmark region"
}
],
"all": [],
"none": [],
"impact": null,
"html": "<html lang=\"en\" class=\"js\">",
"target": [
"html"
]
}
]
},
{
"id": "color-contrast",
"impact": "serious",
"tags": [
"cat.color",
"wcag2aa",
"wcag143",
"TTv5",
"TT13.c",
"EN-301-549",
"EN-9.1.4.3",
"ACT"
],
"description": "Ensure the contrast between foreground and background colors meets WCAG 2 AA minimum contrast ratio thresholds",
"help": "Elements must meet minimum color contrast ratio thresholds",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/color-contrast?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#cfc7b4",
"bgColor": "#1a1712",
"contrastRatio": 10.62,
"fontSize": "8.3pt (11px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [],
"impact": "serious",
"message": "Element has sufficient color contrast of 10.62"
}
],
"all": [],
"none": [],
"impact": null,
"html": "<span id=\"today\">Thursday, November 12, 2026</span>",
"target": [
"#today"
]
}
]
},
{
"id": "document-title",
"impact": null,
"tags": [
"cat.text-alternatives",
"wcag2a",
"wcag242",
"TTv5",
"TT12.a",
"EN-301-549",
"EN-9.2.4.2",
"ACT"
],
"description": "Ensure each HTML document contains a non-empty <title> element",
"help": "Documents must have <title> element to aid in navigation",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/document-title?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "doc-has-title",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "Document has a non-empty <title> element"
}
],
"all": [],
"none": [],
"impact": null,
"html": "<html lang=\"en\" class=\"js\">",
"target": [
"html"
]
}
]
},
{
"id": "duplicate-id-aria",
"impact": null,
"tags": [
"cat.parsing",
"wcag2a",
"wcag412",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure every id attribute value used in ARIA and in labels is unique",
"help": "IDs used in ARIA and labels must be unique",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/duplicate-id-aria?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "duplicate-id-aria",
"data": "nlEmail",
"relatedNodes": [],
"impact": "critical",
"message": "Document has no elements referenced with ARIA or labels that share the same id attribute"
}
],
"all": [],
"none": [],
"impact": null,
"html": "<input type=\"email\" id=\"nlEmail\" placeholder=\"you@example.com\" autocomplete=\"email\">",
"target": [
"#nlEmail"
]
}
]
},
{
"id": "form-field-multiple-labels",
"impact": null,
"tags": [
"cat.forms",
"wcag2a",
"wcag332",
"TTv5",
"TT5.c",
"EN-301-549",
"EN-9.3.3.2"
],
"description": "Ensure form field does not have multiple label elements",
"help": "Form field must not have multiple label elements",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/form-field-multiple-labels?application=axeAPI",
"nodes": [
{
"any": [],
"all": [],
"none": [
{
"id": "multiple-label",
"data": null,
"relatedNodes": [
{
"html": "<label for=\"nlEmail\" class=\"skip\">Email address</label>",
"target": [
"label"
]
}
],
"impact": "moderate",
"message": "Form field does not have multiple label elements"
}
],
"impact": null,
"html": "<input type=\"email\" id=\"nlEmail\" placeholder=\"you@example.com\" autocomplete=\"email\">",
"target": [
"#nlEmail"
]
}
]
},
{
"id": "html-has-lang",
"impact": null,
"tags": [
"cat.language",
"wcag2a",
"wcag311",
"TTv5",
"TT11.a",
"EN-301-549",
"EN-9.3.1.1",
"ACT"
],
"description": "Ensure every HTML document has a lang attribute",
"help": "<html> element must have a lang attribute",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/html-has-lang?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "has-lang",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "The <html> element has a lang attribute"
}
],
"all": [],
"none": [],
"impact": null,
"html": "<html lang=\"en\" class=\"js\">",
"target": [
"html"
]
}
]
},
{
"id": "html-lang-valid",
"impact": null,
"tags": [
"cat.language",
"wcag2a",
"wcag311",
"TTv5",
"TT11.a",
"EN-301-549",
"EN-9.3.1.1",
"ACT"
],
"description": "Ensure the lang attribute of the <html> element has a valid value",
"help": "<html> element must have a valid value for the lang attribute",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/html-lang-valid?application=axeAPI",
"nodes": [
{
"any": [],
"all": [],
"none": [
{
"id": "valid-lang",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "Value of lang attribute is included in the list of valid languages"
}
],
"impact": null,
"html": "<html lang=\"en\" class=\"js\">",
"target": [
"html"
]
}
]
},
{
"id": "image-alt",
"impact": null,
"tags": [
"cat.text-alternatives",
"wcag2a",
"wcag111",
"section508",
"section508.22.a",
"TTv5",
"TT7.a",
"TT7.b",
"EN-301-549",
"EN-9.1.1.1",
"ACT"
],
"description": "Ensure <img> elements have alternative text or a role of none or presentation",
"help": "Images must have alternative text",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/image-alt?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "has-alt",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "Element has an alt attribute"
}
],
"all": [],
"none": [
{
"id": "alt-space-value",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "Element has a valid alt attribute value"
}
],
"impact": null,
"html": "<img src=\"https://i.pravatar.cc/68?u=mara-ellison\" alt=\"Portrait of Mara Ellison\">",
"target": [
"img[alt=\"Portrait of Mara Ellison\"]"
]
}
]
},
{
"id": "label",
"impact": null,
"tags": [
"cat.forms",
"wcag2a",
"wcag412",
"section508",
"section508.22.n",
"TTv5",
"TT5.c",
"EN-301-549",
"EN-9.4.1.2",
"ACT"
],
"description": "Ensure every form element has a label",
"help": "Form elements must have labels",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/label?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "explicit-label",
"data": null,
"relatedNodes": [
{
"html": "<label for=\"nlEmail\" class=\"skip\">Email address</label>",
"target": [
"label"
]
}
],
"impact": "critical",
"message": "Element has an explicit <label>"
},
{
"id": "non-empty-placeholder",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "Element has a placeholder attribute"
}
],
"all": [],
"none": [
{
"id": "hidden-explicit-label",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "Form element has a visible explicit <label>"
}
],
"impact": null,
"html": "<input type=\"email\" id=\"nlEmail\" placeholder=\"you@example.com\" autocomplete=\"email\">",
"target": [
"#nlEmail"
]
}
]
},
{
"id": "link-in-text-block",
"impact": null,
"tags": [
"cat.color",
"wcag2a",
"wcag141",
"TTv5",
"TT13.a",
"EN-301-549",
"EN-9.1.4.1"
],
"description": "Ensure links are distinguished from surrounding text in a way that does not rely on color",
"help": "Links must be distinguishable without relying on color",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/link-in-text-block?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "link-in-text-block",
"data": null,
"relatedNodes": [
{
"html": "<div class=\"dd-left\">",
"target": [
".dd-left"
]
}
],
"impact": "serious",
"message": "Links can be distinguished from surrounding text in some way other than by color"
},
{
"id": "link-in-text-block-style",
"data": null,
"relatedNodes": [
{
"html": "<div class=\"dd-left\">",
"target": [
".dd-left"
]
}
],
"impact": "serious",
"message": "Links can be distinguished from surrounding text by visual styling"
}
],
"all": [],
"none": [],
"impact": null,
"html": "<a class=\"btn\" href=\"#data\">Follow the Data Desk <span class=\"ar\">\u2192</span></a>",
"target": [
".btn[href$=\"#data\"]"
]
}
]
},
{
"id": "link-name",
"impact": null,
"tags": [
"cat.name-role-value",
"wcag2a",
"wcag244",
"wcag412",
"section508",
"section508.22.a",
"TTv5",
"TT6.a",
"EN-301-549",
"EN-9.2.4.4",
"EN-9.4.1.2",
"ACT"
],
"description": "Ensure links have discernible text",
"help": "Links must have discernible text",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/link-name?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "has-visible-text",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "Element has text that is visible to screen readers"
}
],
"all": [],
"none": [
{
"id": "focusable-no-name",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "Element is not in tab order or has accessible text"
}
],
"impact": null,
"html": "<a class=\"skip\" href=\"#front\">Skip to content</a>",
"target": [
".skip[href$=\"#front\"]"
]
}
]
},
{
"id": "list",
"impact": null,
"tags": [
"cat.structure",
"wcag2a",
"wcag131",
"EN-301-549",
"EN-9.1.3.1"
],
"description": "Ensure that lists are structured correctly",
"help": "<ul> and <ol> must only directly contain <li>, <script> or <template> elements",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/list?application=axeAPI",
"nodes": [
{
"any": [],
"all": [],
"none": [
{
"id": "only-listitems",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "List element only has direct children that are allowed inside <li> elements"
}
],
"impact": null,
"html": "<ul>",
"target": [
".wire > ul"
]
}
]
},
{
"id": "listitem",
"impact": null,
"tags": [
"cat.structure",
"wcag2a",
"wcag131",
"EN-301-549",
"EN-9.1.3.1"
],
"description": "Ensure <li> elements are used semantically",
"help": "<li> elements must be contained in a <ul> or <ol>",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/listitem?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "listitem",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "List item has a <ul>, <ol> or role=\"list\" parent element"
}
],
"all": [],
"none": [],
"impact": null,
"html": "<li data-rv=\"\" class=\"on\"><span class=\"t\"><b>06:41</b> VERIFY</span><h3 class=\"hl\"><a href=\"#data\">Isobar Verify: five claims from last night's barrier debate, checked</a></h3><p>Two claims rated misleading, including a figure that conflated state and federal funding streams.</p></li>",
"target": [
"ul > .on"
]
}
]
},
{
"id": "meta-viewport",
"impact": null,
"tags": [
"cat.sensory-and-visual-cues",
"wcag2aa",
"wcag144",
"EN-301-549",
"EN-9.1.4.4",
"ACT"
],
"description": "Ensure <meta name=\"viewport\"> does not disable text scaling and zooming",
"help": "Zooming and scaling must not be disabled",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/meta-viewport?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "meta-viewport",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "<meta> tag does not disable zooming on mobile devices"
}
],
"all": [],
"none": [],
"impact": null,
"html": "<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">",
"target": [
"meta[name=\"viewport\"]"
]
}
]
},
{
"id": "nested-interactive",
"impact": null,
"tags": [
"cat.keyboard",
"wcag2a",
"wcag412",
"TTv5",
"TT6.a",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure interactive controls are not nested as they are not always announced by screen readers or can cause focus problems for assistive technologies",
"help": "Interactive controls must not be nested",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/nested-interactive?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "no-focusable-content",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "Element does not have focusable descendants"
}
],
"all": [],
"none": [],
"impact": null,
"html": "<img src=\"https://i.pravatar.cc/68?u=mara-ellison\" alt=\"Portrait of Mara Ellison\">",
"target": [
"img[alt=\"Portrait of Mara Ellison\"]"
]
}
]
},
{
"id": "scrollable-region-focusable",
"impact": null,
"tags": [
"cat.keyboard",
"wcag2a",
"wcag211",
"wcag213",
"TTv5",
"TT4.a",
"EN-301-549",
"EN-9.2.1.1",
"EN-9.2.1.3"
],
"description": "Ensure elements that have scrollable content are accessible by keyboard",
"help": "Scrollable region must have keyboard access",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/scrollable-region-focusable?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "focusable-content",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "Element contains focusable elements"
}
],
"all": [],
"none": [],
"impact": null,
"html": "<div class=\"world-row\" id=\"worldRow\" data-rv=\"\">",
"target": [
"#worldRow"
]
}
]
},
{
"id": "target-size",
"impact": null,
"tags": [
"cat.sensory-and-visual-cues",
"wcag22aa",
"wcag258"
],
"description": "Ensure touch targets have sufficient size and space",
"help": "All touch targets must be 24px large, or leave sufficient space",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/target-size?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "target-size",
"data": {
"minSize": 24,
"width": 146.4,
"height": 42.2
},
"relatedNodes": [],
"impact": "serious",
"message": "Control has sufficient size (146.4px by 42.2px, should be at least 24px by 24px)"
},
{
"id": "target-offset",
"data": {
"closestOffset": 24,
"minOffset": 24
},
"relatedNodes": [],
"impact": "serious",
"message": "Target has sufficient space from its closest neighbors. Safe clickable space has a diameter of 24px which is at least 24px."
}
],
"all": [],
"none": [],
"impact": null,
"html": "<a class=\"skip\" href=\"#front\">Skip to content</a>",
"target": [
".skip[href$=\"#front\"]"
]
}
]
},
{
"id": "td-headers-attr",
"impact": null,
"tags": [
"cat.tables",
"wcag2a",
"wcag131",
"section508",
"section508.22.g",
"TTv5",
"TT14.b",
"EN-301-549",
"EN-9.1.3.1"
],
"description": "Ensure that each cell in a table that uses the headers attribute refers only to other cells in that table",
"help": "Table cells that use the headers attribute must only refer to cells in the same table",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/td-headers-attr?application=axeAPI",
"nodes": [
{
"any": [],
"all": [
{
"id": "td-headers-attr",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "The headers attribute is exclusively used to refer to other cells in the table"
}
],
"none": [],
"impact": null,
"html": "<table class=\"mkt\" aria-label=\"Market snapshot\">",
"target": [
"table"
]
}
]
},
{
"id": "th-has-data-cells",
"impact": null,
"tags": [
"cat.tables",
"wcag2a",
"wcag131",
"section508",
"section508.22.g",
"TTv5",
"TT14.b",
"EN-301-549",
"EN-9.1.3.1"
],
"description": "Ensure that <th> elements and elements with role=columnheader/rowheader have data cells they describe",
"help": "Table headers in a data table must refer to data cells",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/th-has-data-cells?application=axeAPI",
"nodes": [
{
"any": [],
"all": [
{
"id": "th-has-data-cells",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "All table header cells refer to data cells"
}
],
"none": [],
"impact": null,
"html": "<table class=\"mkt\" aria-label=\"Market snapshot\">",
"target": [
"table"
]
}
]
}
],
"incomplete": [
{
"id": "aria-prohibited-attr",
"impact": "serious",
"tags": [
"cat.aria",
"wcag2a",
"wcag412",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure ARIA attributes are not prohibited for an element's role",
"help": "Elements must only use permitted ARIA attributes",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-prohibited-attr?application=axeAPI",
"nodes": [
{
"any": [],
"all": [],
"none": [
{
"id": "aria-prohibited-attr",
"data": {
"role": null,
"nodeName": "div",
"messageKey": "noRoleSingular",
"prohibited": [
"aria-label"
]
},
"relatedNodes": [],
"impact": "serious",
"message": "aria-label attribute is not well supported on a div with no valid role attribute."
}
],
"impact": "serious",
"html": "<div class=\"ticker\" aria-label=\"Breaking news ticker\">",
"target": [
".ticker"
],
"failureSummary": "Fix all of the following:\n aria-label attribute is not well supported on a div with no valid role attribute."
}
]
},
{
"id": "color-contrast",
"impact": "serious",
"tags": [
"cat.color",
"wcag2aa",
"wcag143",
"TTv5",
"TT13.c",
"EN-301-549",
"EN-9.1.4.3",
"ACT"
],
"description": "Ensure the contrast between foreground and background colors meets WCAG 2 AA minimum contrast ratio thresholds",
"help": "Elements must meet minimum color contrast ratio thresholds",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/color-contrast?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": null,
"bgColor": null,
"contrastRatio": 0,
"fontSize": "12.2pt (16.32px)",
"fontWeight": "normal",
"messageKey": "bgGradient",
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<a href=\"#data\">Isobar Verify: five claims from last night's barrier debate, checked</a>",
"target": [
".on > .hl > a[href$=\"#data\"]"
]
}
],
"impact": "serious",
"message": "Element's background color could not be determined due to a background gradient"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<a href=\"#data\">Isobar Verify: five claims from last night's barrier debate, checked</a>",
"target": [
".on > .hl > a[href$=\"#data\"]"
],
"failureSummary": "Fix any of the following:\n Element's background color could not be determined due to a background gradient"
}
]
}
],
"violations": [
{
"id": "color-contrast",
"impact": "serious",
"tags": [
"cat.color",
"wcag2aa",
"wcag143",
"TTv5",
"TT13.c",
"EN-301-549",
"EN-9.1.4.3",
"ACT"
],
"description": "Ensure the contrast between foreground and background colors meets WCAG 2 AA minimum contrast ratio thresholds",
"help": "Elements must meet minimum color contrast ratio thresholds",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/color-contrast?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#7d7666",
"bgColor": "#f4efe3",
"contrastRatio": 3.93,
"fontSize": "7.9pt (10.5px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<body>",
"target": [
"body"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 3.93 (foreground color: #7d7666, background color: #f4efe3, font size: 7.9pt (10.5px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span>Morning Edition</span>",
"target": [
".mast-top > span:nth-child(1)"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.93 (foreground color: #7d7666, background color: #f4efe3, font size: 7.9pt (10.5px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#7d7666",
"bgColor": "#f4efe3",
"contrastRatio": 3.93,
"fontSize": "7.9pt (10.5px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<body>",
"target": [
"body"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 3.93 (foreground color: #7d7666, background color: #f4efe3, font size: 7.9pt (10.5px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span>Vol. VII \u00b7 No. 214 \u00b7 Est. 2019</span>",
"target": [
".mast-top > span:nth-child(2)"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.93 (foreground color: #7d7666, background color: #f4efe3, font size: 7.9pt (10.5px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#7d7666",
"bgColor": "#f4efe3",
"contrastRatio": 3.93,
"fontSize": "7.9pt (10.5px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<body>",
"target": [
"body"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 3.93 (foreground color: #7d7666, background color: #f4efe3, font size: 7.9pt (10.5px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span>Harbor City, HC</span>",
"target": [
".mast-top > span:nth-child(3)"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.93 (foreground color: #7d7666, background color: #f4efe3, font size: 7.9pt (10.5px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#cf3410",
"bgColor": "#f4efe3",
"contrastRatio": 4.4,
"fontSize": "14.4pt (19.2px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<body>",
"target": [
"body"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 4.4 (foreground color: #cf3410, background color: #f4efe3, font size: 14.4pt (19.2px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<b>Every headline pressure-tested. Every forecast field-verified.</b>",
"target": [
".tagline > b"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 4.4 (foreground color: #cf3410, background color: #f4efe3, font size: 14.4pt (19.2px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#cf3410",
"bgColor": "#f4efe3",
"contrastRatio": 4.4,
"fontSize": "8.3pt (11px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<body>",
"target": [
"body"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 4.4 (foreground color: #cf3410, background color: #f4efe3, font size: 8.3pt (11px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<p class=\"kick on\" data-rv=\"\">The Lead \u00b7 Infrastructure & Climate</p>",
"target": [
".on.kick[data-rv=\"\"]"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 4.4 (foreground color: #cf3410, background color: #f4efe3, font size: 8.3pt (11px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#cf3410",
"bgColor": "#f4efe3",
"contrastRatio": 4.4,
"fontSize": "9.0pt (12px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<body>",
"target": [
"body"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 4.4 (foreground color: #cf3410, background color: #f4efe3, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span>\u21bb LIVE</span>",
"target": [
".wire-h > span:nth-child(2)"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 4.4 (foreground color: #cf3410, background color: #f4efe3, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#7d7666",
"bgColor": "#f4efe3",
"contrastRatio": 3.93,
"fontSize": "7.9pt (10.5px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<body>",
"target": [
"body"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 3.93 (foreground color: #7d7666, background color: #f4efe3, font size: 7.9pt (10.5px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span class=\"t\"><b>06:41</b> VERIFY</span>",
"target": [
"ul > .on > .t"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.93 (foreground color: #7d7666, background color: #f4efe3, font size: 7.9pt (10.5px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#cf3410",
"bgColor": "#f4efe3",
"contrastRatio": 4.4,
"fontSize": "7.9pt (10.5px)",
"fontWeight": "bold",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<body>",
"target": [
"body"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 4.4 (foreground color: #cf3410, background color: #f4efe3, font size: 7.9pt (10.5px), font weight: bold). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<b>06:41</b>",
"target": [
".on > .t > b"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 4.4 (foreground color: #cf3410, background color: #f4efe3, font size: 7.9pt (10.5px), font weight: bold). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#cf3410",
"bgColor": "#f4efe3",
"contrastRatio": 4.4,
"fontSize": "8.3pt (11px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<body>",
"target": [
"body"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 4.4 (foreground color: #cf3410, background color: #f4efe3, font size: 8.3pt (11px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<a class=\"more\" href=\"#subscribe\">READ THE FULL MORNING BRIEFING \u2192</a>",
"target": [
".more"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 4.4 (foreground color: #cf3410, background color: #f4efe3, font size: 8.3pt (11px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#7d7666",
"bgColor": "#f4efe3",
"contrastRatio": 3.93,
"fontSize": "8.3pt (11px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<body>",
"target": [
"body"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 3.93 (foreground color: #7d7666, background color: #f4efe3, font size: 8.3pt (11px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span class=\"idx mono\">SEC. 04 \u00b7 WORLD AFFAIRS</span>",
"target": [
"#world > .wrap > .sec-head > div:nth-child(1) > .idx.mono"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.93 (foreground color: #7d7666, background color: #f4efe3, font size: 8.3pt (11px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#7d7666",
"bgColor": "#ece4d0",
"contrastRatio": 3.56,
"fontSize": "8.3pt (11px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<section class=\"photos\" id=\"culture\">",
"target": [
"#culture"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 3.56 (foreground color: #7d7666, background color: #ece4d0, font size: 8.3pt (11px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span class=\"idx mono\">SEC. 05 \u00b7 CULTURE & PHOTO DESK</span>",
"target": [
"#culture > .wrap > .sec-head > div > .idx.mono"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.56 (foreground color: #7d7666, background color: #ece4d0, font size: 8.3pt (11px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#7d7666",
"bgColor": "#ece4d0",
"contrastRatio": 3.56,
"fontSize": "8.3pt (11px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<section class=\"photos\" id=\"culture\">",
"target": [
"#culture"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 3.56 (foreground color: #7d7666, background color: #ece4d0, font size: 8.3pt (11px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<p class=\"side\">Dispatches from our four staff photographers, shot on assignment across the harbor.</p>",
"target": [
"#culture > .wrap > .sec-head > .side"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.56 (foreground color: #7d7666, background color: #ece4d0, font size: 8.3pt (11px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#7d7666",
"bgColor": "#f4efe3",
"contrastRatio": 3.93,
"fontSize": "8.3pt (11px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<body>",
"target": [
"body"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 3.93 (foreground color: #7d7666, background color: #f4efe3, font size: 8.3pt (11px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span class=\"idx mono\">SEC. 06 \u00b7 CITY & COMMUNITY</span>",
"target": [
"#city > .wrap > .sec-head > div > .idx.mono"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.93 (foreground color: #7d7666, background color: #f4efe3, font size: 8.3pt (11px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#7d7666",
"bgColor": "#f4efe3",
"contrastRatio": 3.93,
"fontSize": "8.3pt (11px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<body>",
"target": [
"body"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 3.93 (foreground color: #7d7666, background color: #f4efe3, font size: 8.3pt (11px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<p class=\"side\">Neighborhood reporting, what's on, and the stories readers flag to us first.</p>",
"target": [
"#city > .wrap > .sec-head > .side"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.93 (foreground color: #7d7666, background color: #f4efe3, font size: 8.3pt (11px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#7d7666",
"bgColor": "#f4efe3",
"contrastRatio": 3.93,
"fontSize": "8.3pt (11px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<body>",
"target": [
"body"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 3.93 (foreground color: #7d7666, background color: #f4efe3, font size: 8.3pt (11px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span class=\"idx mono\">SEC. 07 \u00b7 READER TRUST</span>",
"target": [
"#trust > .wrap > .sec-head > div > .idx.mono"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.93 (foreground color: #7d7666, background color: #f4efe3, font size: 8.3pt (11px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#7d7666",
"bgColor": "#f4efe3",
"contrastRatio": 3.93,
"fontSize": "8.3pt (11px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<body>",
"target": [
"body"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 3.93 (foreground color: #7d7666, background color: #f4efe3, font size: 8.3pt (11px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<p class=\"side\">From pilots to teachers \u2014 why Harbor City keeps The Isobar on the record.</p>",
"target": [
"#trust > .wrap > .sec-head > .side"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.93 (foreground color: #7d7666, background color: #f4efe3, font size: 8.3pt (11px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#7d7666",
"bgColor": "#1a1712",
"contrastRatio": 3.96,
"fontSize": "7.9pt (10.5px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<footer>",
"target": [
"footer"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 3.96 (foreground color: #7d7666, background color: #1a1712, font size: 7.9pt (10.5px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span>\u00a9 2025 The Isobar Media Group. All rights reserved. Independently owned, reader-funded.</span>",
"target": [
".f-bottom > span:nth-child(1)"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.96 (foreground color: #7d7666, background color: #1a1712, font size: 7.9pt (10.5px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#7d7666",
"bgColor": "#1a1712",
"contrastRatio": 3.96,
"fontSize": "7.9pt (10.5px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<footer>",
"target": [
"footer"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 3.96 (foreground color: #7d7666, background color: #1a1712, font size: 7.9pt (10.5px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span><a href=\"#\">Privacy</a> \u00b7 <a href=\"#\">Terms</a> \u00b7 <a href=\"#\">Cookie Preferences</a> \u00b7 <a href=\"#\">Accessibility</a> \u00b7 <a href=\"#\">RSS</a></span>",
"target": [
".f-bottom > span:nth-child(2)"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.96 (foreground color: #7d7666, background color: #1a1712, font size: 7.9pt (10.5px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#7d7666",
"bgColor": "#1a1712",
"contrastRatio": 3.96,
"fontSize": "7.9pt (10.5px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<footer>",
"target": [
"footer"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 3.96 (foreground color: #7d7666, background color: #1a1712, font size: 7.9pt (10.5px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<a href=\"#\">Privacy</a>",
"target": [
"span:nth-child(2) > a[href=\"#\"]:nth-child(1)"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.96 (foreground color: #7d7666, background color: #1a1712, font size: 7.9pt (10.5px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#7d7666",
"bgColor": "#1a1712",
"contrastRatio": 3.96,
"fontSize": "7.9pt (10.5px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<footer>",
"target": [
"footer"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 3.96 (foreground color: #7d7666, background color: #1a1712, font size: 7.9pt (10.5px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<a href=\"#\">Terms</a>",
"target": [
"span:nth-child(2) > a[href=\"#\"]:nth-child(2)"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.96 (foreground color: #7d7666, background color: #1a1712, font size: 7.9pt (10.5px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#7d7666",
"bgColor": "#1a1712",
"contrastRatio": 3.96,
"fontSize": "7.9pt (10.5px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<footer>",
"target": [
"footer"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 3.96 (foreground color: #7d7666, background color: #1a1712, font size: 7.9pt (10.5px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<a href=\"#\">Cookie Preferences</a>",
"target": [
"span:nth-child(2) > a[href=\"#\"]:nth-child(3)"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.96 (foreground color: #7d7666, background color: #1a1712, font size: 7.9pt (10.5px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#7d7666",
"bgColor": "#1a1712",
"contrastRatio": 3.96,
"fontSize": "7.9pt (10.5px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<footer>",
"target": [
"footer"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 3.96 (foreground color: #7d7666, background color: #1a1712, font size: 7.9pt (10.5px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<a href=\"#\">Accessibility</a>",
"target": [
"span:nth-child(2) > a[href=\"#\"]:nth-child(4)"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.96 (foreground color: #7d7666, background color: #1a1712, font size: 7.9pt (10.5px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#7d7666",
"bgColor": "#1a1712",
"contrastRatio": 3.96,
"fontSize": "7.9pt (10.5px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<footer>",
"target": [
"footer"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 3.96 (foreground color: #7d7666, background color: #1a1712, font size: 7.9pt (10.5px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<a href=\"#\">RSS</a>",
"target": [
"a[href=\"#\"]:nth-child(5)"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.96 (foreground color: #7d7666, background color: #1a1712, font size: 7.9pt (10.5px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#7d7666",
"bgColor": "#f4efe3",
"contrastRatio": 3.93,
"fontSize": "8.3pt (11px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<body>",
"target": [
"body"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 3.93 (foreground color: #7d7666, background color: #f4efe3, font size: 8.3pt (11px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span>By <b>Mara Ellison</b>, Infrastructure Correspondent<br>Photographs by <b>Theo Rasmussen</b></span>",
"target": [
".byline > span:nth-child(2)"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.93 (foreground color: #7d7666, background color: #f4efe3, font size: 8.3pt (11px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#7d7666",
"bgColor": "#f4efe3",
"contrastRatio": 3.93,
"fontSize": "8.3pt (11px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<body>",
"target": [
"body"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 3.93 (foreground color: #7d7666, background color: #f4efe3, font size: 8.3pt (11px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span>Updated 6:12 a.m. ET \u00b7 8 min read</span>",
"target": [
".byline > span:nth-child(3)"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.93 (foreground color: #7d7666, background color: #f4efe3, font size: 8.3pt (11px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#2f9e63",
"bgColor": "#f4efe3",
"contrastRatio": 2.95,
"fontSize": "7.5pt (10px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<body>",
"target": [
"body"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 2.95 (foreground color: #2f9e63, background color: #f4efe3, font size: 7.5pt (10px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span class=\"vchip\">\u2713 ISOBAR VERIFIED</span>",
"target": [
".vchip"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.95 (foreground color: #2f9e63, background color: #f4efe3, font size: 7.5pt (10px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#7d7666",
"bgColor": "#f4efe3",
"contrastRatio": 3.93,
"fontSize": "8.3pt (11px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<body>",
"target": [
"body"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 3.93 (foreground color: #7d7666, background color: #f4efe3, font size: 8.3pt (11px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<figcaption>Dawn over the cofferdam site at Meridian Quay, hours after the vote. Photograph: Theo Rasmussen / The Isobar</figcaption>",
"target": [
".on:nth-child(5) > figcaption"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.93 (foreground color: #7d7666, background color: #f4efe3, font size: 8.3pt (11px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#7d7666",
"bgColor": "#f4efe3",
"contrastRatio": 3.93,
"fontSize": "7.9pt (10.5px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<body>",
"target": [
"body"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 3.93 (foreground color: #7d7666, background color: #f4efe3, font size: 7.9pt (10.5px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span class=\"t\"><b>06:41</b> VERIFY</span>",
"target": [
"ul > .on:nth-child(1) > .t"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.93 (foreground color: #7d7666, background color: #f4efe3, font size: 7.9pt (10.5px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#cf3410",
"bgColor": "#f4efe3",
"contrastRatio": 4.4,
"fontSize": "7.9pt (10.5px)",
"fontWeight": "bold",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<body>",
"target": [
"body"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 4.4 (foreground color: #cf3410, background color: #f4efe3, font size: 7.9pt (10.5px), font weight: bold). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<b>06:41</b>",
"target": [
".on:nth-child(1) > .t > b"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 4.4 (foreground color: #cf3410, background color: #f4efe3, font size: 7.9pt (10.5px), font weight: bold). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#7d7666",
"bgColor": "#f4efe3",
"contrastRatio": 3.93,
"fontSize": "7.9pt (10.5px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<body>",
"target": [
"body"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 3.93 (foreground color: #7d7666, background color: #f4efe3, font size: 7.9pt (10.5px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span class=\"t\"><b>06:22</b> TRANSIT</span>",
"target": [
".on:nth-child(2) > .t"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.93 (foreground color: #7d7666, background color: #f4efe3, font size: 7.9pt (10.5px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#cf3410",
"bgColor": "#f4efe3",
"contrastRatio": 4.4,
"fontSize": "7.9pt (10.5px)",
"fontWeight": "bold",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<body>",
"target": [
"body"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 4.4 (foreground color: #cf3410, background color: #f4efe3, font size: 7.9pt (10.5px), font weight: bold). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<b>06:22</b>",
"target": [
".on:nth-child(2) > .t > b"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 4.4 (foreground color: #cf3410, background color: #f4efe3, font size: 7.9pt (10.5px), font weight: bold). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#7d7666",
"bgColor": "#f4efe3",
"contrastRatio": 3.93,
"fontSize": "7.9pt (10.5px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<body>",
"target": [
"body"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 3.93 (foreground color: #7d7666, background color: #f4efe3, font size: 7.9pt (10.5px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span class=\"t\"><b>05:58</b> MARKETS</span>",
"target": [
".on:nth-child(3) > .t"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.93 (foreground color: #7d7666, background color: #f4efe3, font size: 7.9pt (10.5px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#cf3410",
"bgColor": "#f4efe3",
"contrastRatio": 4.4,
"fontSize": "7.9pt (10.5px)",
"fontWeight": "bold",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<body>",
"target": [
"body"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 4.4 (foreground color: #cf3410, background color: #f4efe3, font size: 7.9pt (10.5px), font weight: bold). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<b>05:58</b>",
"target": [
".on:nth-child(3) > .t > b"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 4.4 (foreground color: #cf3410, background color: #f4efe3, font size: 7.9pt (10.5px), font weight: bold). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#7d7666",
"bgColor": "#f4efe3",
"contrastRatio": 3.93,
"fontSize": "7.9pt (10.5px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<body>",
"target": [
"body"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 3.93 (foreground color: #7d7666, background color: #f4efe3, font size: 7.9pt (10.5px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span class=\"t\"><b>05:40</b> WEATHER</span>",
"target": [
".on:nth-child(4) > .t"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.93 (foreground color: #7d7666, background color: #f4efe3, font size: 7.9pt (10.5px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#cf3410",
"bgColor": "#f4efe3",
"contrastRatio": 4.4,
"fontSize": "7.9pt (10.5px)",
"fontWeight": "bold",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<body>",
"target": [
"body"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 4.4 (foreground color: #cf3410, background color: #f4efe3, font size: 7.9pt (10.5px), font weight: bold). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<b>05:40</b>",
"target": [
".on:nth-child(4) > .t > b"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 4.4 (foreground color: #cf3410, background color: #f4efe3, font size: 7.9pt (10.5px), font weight: bold). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#7d7666",
"bgColor": "#f4efe3",
"contrastRatio": 3.93,
"fontSize": "7.9pt (10.5px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<body>",
"target": [
"body"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 3.93 (foreground color: #7d7666, background color: #f4efe3, font size: 7.9pt (10.5px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span class=\"t\"><b>05:12</b> SPORTS</span>",
"target": [
".on:nth-child(5) > .t"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.93 (foreground color: #7d7666, background color: #f4efe3, font size: 7.9pt (10.5px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#cf3410",
"bgColor": "#f4efe3",
"contrastRatio": 4.4,
"fontSize": "7.9pt (10.5px)",
"fontWeight": "bold",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<body>",
"target": [
"body"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 4.4 (foreground color: #cf3410, background color: #f4efe3, font size: 7.9pt (10.5px), font weight: bold). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<b>05:12</b>",
"target": [
".on:nth-child(5) > .t > b"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 4.4 (foreground color: #cf3410, background color: #f4efe3, font size: 7.9pt (10.5px), font weight: bold). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#cf3410",
"bgColor": "#f4efe3",
"contrastRatio": 4.4,
"fontSize": "7.9pt (10.5px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<body>",
"target": [
"body"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 4.4 (foreground color: #cf3410, background color: #f4efe3, font size: 7.9pt (10.5px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<cite>\u2014 Council President Ada Okonkwo</cite>",
"target": [
"cite"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 4.4 (foreground color: #cf3410, background color: #f4efe3, font size: 7.9pt (10.5px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#7d7666",
"bgColor": "#f4efe3",
"contrastRatio": 3.93,
"fontSize": "7.9pt (10.5px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<body>",
"target": [
"body"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 3.93 (foreground color: #7d7666, background color: #f4efe3, font size: 7.9pt (10.5px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span class=\"t\"><b>04:55</b> CITY</span>",
"target": [
".on:nth-child(6) > .t"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.93 (foreground color: #7d7666, background color: #f4efe3, font size: 7.9pt (10.5px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#cf3410",
"bgColor": "#f4efe3",
"contrastRatio": 4.4,
"fontSize": "7.9pt (10.5px)",
"fontWeight": "bold",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<body>",
"target": [
"body"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 4.4 (foreground color: #cf3410, background color: #f4efe3, font size: 7.9pt (10.5px), font weight: bold). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<b>04:55</b>",
"target": [
".on:nth-child(6) > .t > b"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 4.4 (foreground color: #cf3410, background color: #f4efe3, font size: 7.9pt (10.5px), font weight: bold). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#cf3410",
"bgColor": "#f4efe3",
"contrastRatio": 4.4,
"fontSize": "8.3pt (11px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<body>",
"target": [
"body"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 4.4 (foreground color: #cf3410, background color: #f4efe3, font size: 8.3pt (11px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<p class=\"kick on\" data-rv=\"\">The Lead \u00b7 Infrastructure & Climate</p>",
"target": [
".kick.on[data-rv=\"\"]"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 4.4 (foreground color: #cf3410, background color: #f4efe3, font size: 8.3pt (11px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#7d7666",
"bgColor": "#ece4d0",
"contrastRatio": 3.56,
"fontSize": "7.9pt (10.5px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<article class=\"tile on\" id=\"sports\" data-rv=\"\">",
"target": [
"#sports"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 3.56 (foreground color: #7d7666, background color: #ece4d0, font size: 7.9pt (10.5px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span>By D. Okafor Sr. \u00b7 5 min</span>",
"target": [
"#sports > .foot > span"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.56 (foreground color: #7d7666, background color: #ece4d0, font size: 7.9pt (10.5px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#cf3410",
"bgColor": "#ece4d0",
"contrastRatio": 3.99,
"fontSize": "7.9pt (10.5px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<article class=\"tile on\" id=\"sports\" data-rv=\"\">",
"target": [
"#sports"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 3.99 (foreground color: #cf3410, background color: #ece4d0, font size: 7.9pt (10.5px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<a href=\"#sports\">READ MORE \u2192</a>",
"target": [
".foot > a[href$=\"#sports\"]"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.99 (foreground color: #cf3410, background color: #ece4d0, font size: 7.9pt (10.5px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#5fd394",
"bgColor": "#ece4d0",
"contrastRatio": 1.47,
"fontSize": "9.0pt (12px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<article class=\"tile on\" id=\"business\" data-rv=\"\" style=\"--d:.1s\">",
"target": [
"#business"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 1.47 (foreground color: #5fd394, background color: #ece4d0, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<td class=\"up\">187.3 \u25b21.2%</td>",
"target": [
"tr:nth-child(1) > .up"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 1.47 (foreground color: #5fd394, background color: #ece4d0, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#5fd394",
"bgColor": "#ece4d0",
"contrastRatio": 1.47,
"fontSize": "9.0pt (12px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<article class=\"tile on\" id=\"business\" data-rv=\"\" style=\"--d:.1s\">",
"target": [
"#business"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 1.47 (foreground color: #5fd394, background color: #ece4d0, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<td class=\"up\">$2,114 \u25b20.8%</td>",
"target": [
"tr:nth-child(2) > .up"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 1.47 (foreground color: #5fd394, background color: #ece4d0, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#ff8563",
"bgColor": "#ece4d0",
"contrastRatio": 1.88,
"fontSize": "9.0pt (12px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<article class=\"tile on\" id=\"business\" data-rv=\"\" style=\"--d:.1s\">",
"target": [
"#business"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 1.88 (foreground color: #ff8563, background color: #ece4d0, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<td class=\"dn\">78.12 \u25bc0.6%</td>",
"target": [
"tr:nth-child(3) > .dn"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 1.88 (foreground color: #ff8563, background color: #ece4d0, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#5fd394",
"bgColor": "#ece4d0",
"contrastRatio": 1.47,
"fontSize": "9.0pt (12px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<article class=\"tile on\" id=\"business\" data-rv=\"\" style=\"--d:.1s\">",
"target": [
"#business"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 1.47 (foreground color: #5fd394, background color: #ece4d0, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<td class=\"up\">4.12% \u25bc3bp</td>",
"target": [
"tr:nth-child(4) > .up"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 1.47 (foreground color: #5fd394, background color: #ece4d0, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#7d7666",
"bgColor": "#ece4d0",
"contrastRatio": 3.56,
"fontSize": "7.9pt (10.5px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<article class=\"tile on\" id=\"business\" data-rv=\"\" style=\"--d:.1s\">",
"target": [
"#business"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 3.56 (foreground color: #7d7666, background color: #ece4d0, font size: 7.9pt (10.5px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span>By R. Whitfield \u00b7 4 min</span>",
"target": [
"#business > .foot > span"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.56 (foreground color: #7d7666, background color: #ece4d0, font size: 7.9pt (10.5px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#cf3410",
"bgColor": "#ece4d0",
"contrastRatio": 3.99,
"fontSize": "7.9pt (10.5px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<article class=\"tile on\" id=\"business\" data-rv=\"\" style=\"--d:.1s\">",
"target": [
"#business"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 3.99 (foreground color: #cf3410, background color: #ece4d0, font size: 7.9pt (10.5px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<a href=\"#business\">READ MORE \u2192</a>",
"target": [
".foot > a[href$=\"#business\"]"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.99 (foreground color: #cf3410, background color: #ece4d0, font size: 7.9pt (10.5px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#7d7666",
"bgColor": "#ece4d0",
"contrastRatio": 3.56,
"fontSize": "7.9pt (10.5px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<article class=\"tile on\" id=\"archive\" data-rv=\"\" style=\"--d:.2s\">",
"target": [
"#archive"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 3.56 (foreground color: #7d7666, background color: #ece4d0, font size: 7.9pt (10.5px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span>Archive Desk</span>",
"target": [
"#archive > .foot > span"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.56 (foreground color: #7d7666, background color: #ece4d0, font size: 7.9pt (10.5px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#cf3410",
"bgColor": "#ece4d0",
"contrastRatio": 3.99,
"fontSize": "7.9pt (10.5px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<article class=\"tile on\" id=\"archive\" data-rv=\"\" style=\"--d:.2s\">",
"target": [
"#archive"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 3.99 (foreground color: #cf3410, background color: #ece4d0, font size: 7.9pt (10.5px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<a href=\"#archive\">EXPLORE \u2192</a>",
"target": [
".foot > a[href$=\"#archive\"]"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.99 (foreground color: #cf3410, background color: #ece4d0, font size: 7.9pt (10.5px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#7d7666",
"bgColor": "#f4efe3",
"contrastRatio": 3.93,
"fontSize": "8.3pt (11px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<body>",
"target": [
"body"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 3.93 (foreground color: #7d7666, background color: #f4efe3, font size: 8.3pt (11px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<figcaption>Dawn over the cofferdam site at Meridian Quay, hours after the vote. Photograph: Theo Rasmussen / The Isobar</figcaption>",
"target": [
".lead > figure > figcaption"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.93 (foreground color: #7d7666, background color: #f4efe3, font size: 8.3pt (11px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#cf3410",
"bgColor": "#f4efe3",
"contrastRatio": 4.4,
"fontSize": "8.3pt (11px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<body>",
"target": [
"body"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 4.4 (foreground color: #cf3410, background color: #f4efe3, font size: 8.3pt (11px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<p class=\"kick on\" data-rv=\"\">The Lead \u00b7 Infrastructure & Climate</p>",
"target": [
".lead > .kick.on[data-rv=\"\"]"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 4.4 (foreground color: #cf3410, background color: #f4efe3, font size: 8.3pt (11px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#cf3410",
"bgColor": "#ead6c1",
"contrastRatio": 3.58,
"fontSize": "8.3pt (11px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<span class=\"stat\">+2.9\u00b0F SINCE 1984</span>",
"target": [
".dcard:nth-child(1) > .tx > .stat"
]
},
{
"html": "<article class=\"dcard on\" data-rv=\"\">",
"target": [
".dcard:nth-child(1)"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 3.58 (foreground color: #cf3410, background color: #ead6c1, font size: 8.3pt (11px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span class=\"stat\">+2.9\u00b0F SINCE 1984</span>",
"target": [
".dcard:nth-child(1) > .tx > .stat"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.58 (foreground color: #cf3410, background color: #ead6c1, font size: 8.3pt (11px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#7d7666",
"bgColor": "#ece4d0",
"contrastRatio": 3.56,
"fontSize": "7.9pt (10.5px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<article class=\"dcard on\" data-rv=\"\">",
"target": [
".dcard:nth-child(1)"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 3.56 (foreground color: #7d7666, background color: #ece4d0, font size: 7.9pt (10.5px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span>By L. Ferreira & the Data Desk \u00b7 12 min read</span>",
"target": [
".dcard:nth-child(1) > .tx > .foot > span"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.56 (foreground color: #7d7666, background color: #ece4d0, font size: 7.9pt (10.5px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#7d7666",
"bgColor": "#ece4d0",
"contrastRatio": 3.56,
"fontSize": "7.5pt (10px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<article class=\"dcard on\" data-rv=\"\">",
"target": [
".dcard:nth-child(1)"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 3.56 (foreground color: #7d7666, background color: #ece4d0, font size: 7.5pt (10px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<button class=\"follow\" aria-pressed=\"false\">+ Follow Topic</button>",
"target": [
".dcard:nth-child(1) > .tx > .foot > .follow"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.56 (foreground color: #7d7666, background color: #ece4d0, font size: 7.5pt (10px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#cf3410",
"bgColor": "#ead6c1",
"contrastRatio": 3.58,
"fontSize": "8.3pt (11px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<span class=\"stat\">$1.9B UNACCOUNTED FOR</span>",
"target": [
".dcard:nth-child(2) > .tx > .stat"
]
},
{
"html": "<article class=\"dcard on\" data-rv=\"\" style=\"--d:.08s\">",
"target": [
".dcard:nth-child(2)"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 3.58 (foreground color: #cf3410, background color: #ead6c1, font size: 8.3pt (11px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span class=\"stat\">$1.9B UNACCOUNTED FOR</span>",
"target": [
".dcard:nth-child(2) > .tx > .stat"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.58 (foreground color: #cf3410, background color: #ead6c1, font size: 8.3pt (11px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#7d7666",
"bgColor": "#ece4d0",
"contrastRatio": 3.56,
"fontSize": "7.9pt (10.5px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<article class=\"dcard on\" data-rv=\"\" style=\"--d:.08s\">",
"target": [
".dcard:nth-child(2)"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 3.56 (foreground color: #7d7666, background color: #ece4d0, font size: 7.9pt (10.5px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span>By M. Ellison & J. Wu \u00b7 18 min read</span>",
"target": [
".dcard:nth-child(2) > .tx > .foot > span"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.56 (foreground color: #7d7666, background color: #ece4d0, font size: 7.9pt (10.5px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#7d7666",
"bgColor": "#ece4d0",
"contrastRatio": 3.56,
"fontSize": "7.5pt (10px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<article class=\"dcard on\" data-rv=\"\" style=\"--d:.08s\">",
"target": [
".dcard:nth-child(2)"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 3.56 (foreground color: #7d7666, background color: #ece4d0, font size: 7.5pt (10px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<button class=\"follow\" aria-pressed=\"false\">+ Follow Topic</button>",
"target": [
".dcard:nth-child(2) > .tx > .foot > .follow"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.56 (foreground color: #7d7666, background color: #ece4d0, font size: 7.5pt (10px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#cf3410",
"bgColor": "#f4efe3",
"contrastRatio": 4.4,
"fontSize": "8.3pt (11px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<body>",
"target": [
"body"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 4.4 (foreground color: #cf3410, background color: #f4efe3, font size: 8.3pt (11px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span class=\"num\">01</span>",
"target": [
"li:nth-child(1) > .num"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 4.4 (foreground color: #cf3410, background color: #f4efe3, font size: 8.3pt (11px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#7d7666",
"bgColor": "#f4efe3",
"contrastRatio": 3.93,
"fontSize": "10.0pt (13.28px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<body>",
"target": [
"body"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 3.93 (foreground color: #7d7666, background color: #f4efe3, font size: 10.0pt (13.28px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span>Public records, sensor feeds and FOIA responses \u2014 logged with timestamps.</span>",
"target": [
"li:nth-child(1) > div > span"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.93 (foreground color: #7d7666, background color: #f4efe3, font size: 10.0pt (13.28px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#cf3410",
"bgColor": "#f4efe3",
"contrastRatio": 4.4,
"fontSize": "8.3pt (11px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<body>",
"target": [
"body"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 4.4 (foreground color: #cf3410, background color: #f4efe3, font size: 8.3pt (11px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span class=\"num\">02</span>",
"target": [
"li:nth-child(2) > .num"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 4.4 (foreground color: #cf3410, background color: #f4efe3, font size: 8.3pt (11px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#7d7666",
"bgColor": "#f4efe3",
"contrastRatio": 3.93,
"fontSize": "10.0pt (13.28px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<body>",
"target": [
"body"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 3.93 (foreground color: #7d7666, background color: #f4efe3, font size: 10.0pt (13.28px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span>Two independent fact-checkers per dataset; three sources for any contested claim.</span>",
"target": [
"li:nth-child(2) > div > span"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.93 (foreground color: #7d7666, background color: #f4efe3, font size: 10.0pt (13.28px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#cf3410",
"bgColor": "#f4efe3",
"contrastRatio": 4.4,
"fontSize": "8.3pt (11px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<body>",
"target": [
"body"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 4.4 (foreground color: #cf3410, background color: #f4efe3, font size: 8.3pt (11px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span class=\"num\">03</span>",
"target": [
"li:nth-child(3) > .num"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 4.4 (foreground color: #cf3410, background color: #f4efe3, font size: 8.3pt (11px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#7d7666",
"bgColor": "#f4efe3",
"contrastRatio": 3.93,
"fontSize": "10.0pt (13.28px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<body>",
"target": [
"body"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 3.93 (foreground color: #7d7666, background color: #f4efe3, font size: 10.0pt (13.28px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span>Methodology pages in plain language, with the headline written last \u2014 never before.</span>",
"target": [
"li:nth-child(3) > div > span"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.93 (foreground color: #7d7666, background color: #f4efe3, font size: 10.0pt (13.28px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#cf3410",
"bgColor": "#f4efe3",
"contrastRatio": 4.4,
"fontSize": "8.3pt (11px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<body>",
"target": [
"body"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 4.4 (foreground color: #cf3410, background color: #f4efe3, font size: 8.3pt (11px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span class=\"num\">04</span>",
"target": [
"li:nth-child(4) > .num"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 4.4 (foreground color: #cf3410, background color: #f4efe3, font size: 8.3pt (11px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#7d7666",
"bgColor": "#f4efe3",
"contrastRatio": 3.93,
"fontSize": "10.0pt (13.28px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<body>",
"target": [
"body"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 3.93 (foreground color: #7d7666, background color: #f4efe3, font size: 10.0pt (13.28px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span>A public corrections log, versioned and never quietly edited.</span>",
"target": [
"li:nth-child(4) > div > span"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.93 (foreground color: #7d7666, background color: #f4efe3, font size: 10.0pt (13.28px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#cf3410",
"bgColor": "#ead6c1",
"contrastRatio": 3.58,
"fontSize": "8.3pt (11px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<span class=\"stat\">11 MIN LOST DAILY</span>",
"target": [
".dcard:nth-child(3) > .tx > .stat"
]
},
{
"html": "<article class=\"dcard on\" data-rv=\"\" style=\"--d:.16s\">",
"target": [
".dcard:nth-child(3)"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 3.58 (foreground color: #cf3410, background color: #ead6c1, font size: 8.3pt (11px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span class=\"stat\">11 MIN LOST DAILY</span>",
"target": [
".dcard:nth-child(3) > .tx > .stat"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.58 (foreground color: #cf3410, background color: #ead6c1, font size: 8.3pt (11px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#7d7666",
"bgColor": "#ece4d0",
"contrastRatio": 3.56,
"fontSize": "7.9pt (10.5px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<article class=\"dcard on\" data-rv=\"\" style=\"--d:.16s\">",
"target": [
".dcard:nth-child(3)"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 3.56 (foreground color: #7d7666, background color: #ece4d0, font size: 7.9pt (10.5px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span>By A. Osei \u00b7 9 min read</span>",
"target": [
".dcard:nth-child(3) > .tx > .foot > span"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.56 (foreground color: #7d7666, background color: #ece4d0, font size: 7.9pt (10.5px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#7d7666",
"bgColor": "#ece4d0",
"contrastRatio": 3.56,
"fontSize": "7.5pt (10px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<article class=\"dcard on\" data-rv=\"\" style=\"--d:.16s\">",
"target": [
".dcard:nth-child(3)"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 3.56 (foreground color: #7d7666, background color: #ece4d0, font size: 7.5pt (10px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<button class=\"follow\" aria-pressed=\"false\">+ Follow Topic</button>",
"target": [
".dcard:nth-child(3) > .tx > .foot > .follow"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.56 (foreground color: #7d7666, background color: #ece4d0, font size: 7.5pt (10px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#cf3410",
"bgColor": "#ead6c1",
"contrastRatio": 3.58,
"fontSize": "8.3pt (11px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<span class=\"stat\">140 SENSORS LIVE</span>",
"target": [
".dcard:nth-child(4) > .tx > .stat"
]
},
{
"html": "<article class=\"dcard on\" data-rv=\"\" style=\"--d:.24s\">",
"target": [
".dcard:nth-child(4)"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 3.58 (foreground color: #cf3410, background color: #ead6c1, font size: 8.3pt (11px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span class=\"stat\">140 SENSORS LIVE</span>",
"target": [
".dcard:nth-child(4) > .tx > .stat"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.58 (foreground color: #cf3410, background color: #ead6c1, font size: 8.3pt (11px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#7d7666",
"bgColor": "#ece4d0",
"contrastRatio": 3.56,
"fontSize": "7.9pt (10.5px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<article class=\"dcard on\" data-rv=\"\" style=\"--d:.24s\">",
"target": [
".dcard:nth-child(4)"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 3.56 (foreground color: #7d7666, background color: #ece4d0, font size: 7.9pt (10.5px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span>By the Sensor Desk \u00b7 7 min read</span>",
"target": [
".dcard:nth-child(4) > .tx > .foot > span"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.56 (foreground color: #7d7666, background color: #ece4d0, font size: 7.9pt (10.5px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#7d7666",
"bgColor": "#ece4d0",
"contrastRatio": 3.56,
"fontSize": "7.5pt (10px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<article class=\"dcard on\" data-rv=\"\" style=\"--d:.24s\">",
"target": [
".dcard:nth-child(4)"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 3.56 (foreground color: #7d7666, background color: #ece4d0, font size: 7.5pt (10px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<button class=\"follow\" aria-pressed=\"false\">+ Follow Topic</button>",
"target": [
".dcard:nth-child(4) > .tx > .foot > .follow"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.56 (foreground color: #7d7666, background color: #ece4d0, font size: 7.5pt (10px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#7d7666",
"bgColor": "#ece4d0",
"contrastRatio": 3.56,
"fontSize": "7.9pt (10.5px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<article class=\"wcard\">",
"target": [
".wcard:nth-child(1)"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 3.56 (foreground color: #7d7666, background color: #ece4d0, font size: 7.9pt (10.5px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span class=\"who\"><img src=\"https://i.pravatar.cc/52?u=sofia-reyes\" alt=\"\">S. Reyes, Geneva Bureau</span>",
"target": [
".wcard:nth-child(1) > .tx > .meta > .who"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.56 (foreground color: #7d7666, background color: #ece4d0, font size: 7.9pt (10.5px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#7d7666",
"bgColor": "#ece4d0",
"contrastRatio": 3.56,
"fontSize": "7.9pt (10.5px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<article class=\"wcard\">",
"target": [
".wcard:nth-child(1)"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 3.56 (foreground color: #7d7666, background color: #ece4d0, font size: 7.9pt (10.5px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span>6 MIN</span>",
"target": [
".wcard:nth-child(1) > .tx > .meta > span:nth-child(2)"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.56 (foreground color: #7d7666, background color: #ece4d0, font size: 7.9pt (10.5px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#7d7666",
"bgColor": "#ece4d0",
"contrastRatio": 3.56,
"fontSize": "7.9pt (10.5px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<article class=\"wcard\">",
"target": [
".wcard:nth-child(2)"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 3.56 (foreground color: #7d7666, background color: #ece4d0, font size: 7.9pt (10.5px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span class=\"who\"><img src=\"https://i.pravatar.cc/52?u=daniel-kip\" alt=\"\">D. Kiprop</span>",
"target": [
".wcard:nth-child(2) > .tx > .meta > .who"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.56 (foreground color: #7d7666, background color: #ece4d0, font size: 7.9pt (10.5px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#7d7666",
"bgColor": "#ece4d0",
"contrastRatio": 3.56,
"fontSize": "7.9pt (10.5px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<article class=\"wcard\">",
"target": [
".wcard:nth-child(2)"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 3.56 (foreground color: #7d7666, background color: #ece4d0, font size: 7.9pt (10.5px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span>8 MIN</span>",
"target": [
".wcard:nth-child(2) > .tx > .meta > span:nth-child(2)"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.56 (foreground color: #7d7666, background color: #ece4d0, font size: 7.9pt (10.5px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#7d7666",
"bgColor": "#ece4d0",
"contrastRatio": 3.56,
"fontSize": "7.9pt (10.5px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<article class=\"wcard\">",
"target": [
".wcard:nth-child(3)"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 3.56 (foreground color: #7d7666, background color: #ece4d0, font size: 7.9pt (10.5px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span class=\"who\"><img src=\"https://i.pravatar.cc/52?u=yuki-tanabe\" alt=\"\">Y. Tanabe</span>",
"target": [
".wcard:nth-child(3) > .tx > .meta > .who"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.56 (foreground color: #7d7666, background color: #ece4d0, font size: 7.9pt (10.5px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#7d7666",
"bgColor": "#ece4d0",
"contrastRatio": 3.56,
"fontSize": "7.9pt (10.5px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<article class=\"wcard\">",
"target": [
".wcard:nth-child(3)"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 3.56 (foreground color: #7d7666, background color: #ece4d0, font size: 7.9pt (10.5px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span>7 MIN</span>",
"target": [
".wcard:nth-child(3) > .tx > .meta > span:nth-child(2)"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.56 (foreground color: #7d7666, background color: #ece4d0, font size: 7.9pt (10.5px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#7d7666",
"bgColor": "#ece4d0",
"contrastRatio": 3.56,
"fontSize": "7.9pt (10.5px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<article class=\"wcard\">",
"target": [
".wcard:nth-child(4)"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 3.56 (foreground color: #7d7666, background color: #ece4d0, font size: 7.9pt (10.5px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span class=\"who\"><img src=\"https://i.pravatar.cc/52?u=camila-nunes\" alt=\"\">C. Nunes</span>",
"target": [
".wcard:nth-child(4) > .tx > .meta > .who"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.56 (foreground color: #7d7666, background color: #ece4d0, font size: 7.9pt (10.5px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#7d7666",
"bgColor": "#ece4d0",
"contrastRatio": 3.56,
"fontSize": "7.9pt (10.5px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<article class=\"wcard\">",
"target": [
".wcard:nth-child(4)"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 3.56 (foreground color: #7d7666, background color: #ece4d0, font size: 7.9pt (10.5px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span>9 MIN</span>",
"target": [
".wcard:nth-child(4) > .tx > .meta > span:nth-child(2)"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.56 (foreground color: #7d7666, background color: #ece4d0, font size: 7.9pt (10.5px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#7d7666",
"bgColor": "#ece4d0",
"contrastRatio": 3.56,
"fontSize": "7.9pt (10.5px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<article class=\"wcard\">",
"target": [
".wcard:nth-child(5)"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 3.56 (foreground color: #7d7666, background color: #ece4d0, font size: 7.9pt (10.5px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span class=\"who\"><img src=\"https://i.pravatar.cc/52?u=erik-holm\" alt=\"\">E. Holm, Trade Desk</span>",
"target": [
".wcard:nth-child(5) > .tx > .meta > .who"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.56 (foreground color: #7d7666, background color: #ece4d0, font size: 7.9pt (10.5px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#7d7666",
"bgColor": "#ece4d0",
"contrastRatio": 3.56,
"fontSize": "7.9pt (10.5px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<article class=\"wcard\">",
"target": [
".wcard:nth-child(5)"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 3.56 (foreground color: #7d7666, background color: #ece4d0, font size: 7.9pt (10.5px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span>5 MIN</span>",
"target": [
".wcard:nth-child(5) > .tx > .meta > span:nth-child(2)"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.56 (foreground color: #7d7666, background color: #ece4d0, font size: 7.9pt (10.5px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#cf3410",
"bgColor": "#f4efe3",
"contrastRatio": 4.4,
"fontSize": "7.9pt (10.5px)",
"fontWeight": "bold",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<body>",
"target": [
"body"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 4.4 (foreground color: #cf3410, background color: #f4efe3, font size: 7.9pt (10.5px), font weight: bold). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<b>FLAGGED BY 47 READERS</b>",
"target": [
".bull-item:nth-child(1) > div > .meta > span:nth-child(1) > b"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 4.4 (foreground color: #cf3410, background color: #f4efe3, font size: 7.9pt (10.5px), font weight: bold). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#7d7666",
"bgColor": "#f4efe3",
"contrastRatio": 3.93,
"fontSize": "7.9pt (10.5px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<body>",
"target": [
"body"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 3.93 (foreground color: #7d7666, background color: #f4efe3, font size: 7.9pt (10.5px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span>By P. Nguyen \u00b7 3 min</span>",
"target": [
".bull-item:nth-child(1) > div > .meta > span:nth-child(2)"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.93 (foreground color: #7d7666, background color: #f4efe3, font size: 7.9pt (10.5px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#cf3410",
"bgColor": "#f4efe3",
"contrastRatio": 4.4,
"fontSize": "7.9pt (10.5px)",
"fontWeight": "bold",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<body>",
"target": [
"body"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 4.4 (foreground color: #cf3410, background color: #f4efe3, font size: 7.9pt (10.5px), font weight: bold). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<b>BOARD VOTE 6\u20131</b>",
"target": [
".bull-item:nth-child(2) > div > .meta > span:nth-child(1) > b"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 4.4 (foreground color: #cf3410, background color: #f4efe3, font size: 7.9pt (10.5px), font weight: bold). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#7d7666",
"bgColor": "#f4efe3",
"contrastRatio": 3.93,
"fontSize": "7.9pt (10.5px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<body>",
"target": [
"body"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 3.93 (foreground color: #7d7666, background color: #f4efe3, font size: 7.9pt (10.5px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span>By P. Nguyen \u00b7 4 min</span>",
"target": [
".bull-item:nth-child(2) > div > .meta > span:nth-child(2)"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.93 (foreground color: #7d7666, background color: #f4efe3, font size: 7.9pt (10.5px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#cf3410",
"bgColor": "#f4efe3",
"contrastRatio": 4.4,
"fontSize": "7.9pt (10.5px)",
"fontWeight": "bold",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<body>",
"target": [
"body"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 4.4 (foreground color: #cf3410, background color: #f4efe3, font size: 7.9pt (10.5px), font weight: bold). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<b>8-WEEKEND PILOT</b>",
"target": [
".bull-item:nth-child(3) > div > .meta > span:nth-child(1) > b"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 4.4 (foreground color: #cf3410, background color: #f4efe3, font size: 7.9pt (10.5px), font weight: bold). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#7d7666",
"bgColor": "#f4efe3",
"contrastRatio": 3.93,
"fontSize": "7.9pt (10.5px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<body>",
"target": [
"body"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 3.93 (foreground color: #7d7666, background color: #f4efe3, font size: 7.9pt (10.5px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span>By A. Osei \u00b7 5 min</span>",
"target": [
".bull-item:nth-child(3) > div > .meta > span:nth-child(2)"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.93 (foreground color: #7d7666, background color: #f4efe3, font size: 7.9pt (10.5px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#7d7666",
"bgColor": "#f4efe3",
"contrastRatio": 3.93,
"fontSize": "7.9pt (10.5px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<body>",
"target": [
"body"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 3.93 (foreground color: #7d7666, background color: #f4efe3, font size: 7.9pt (10.5px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span class=\"t\"><b>06:41</b> VERIFY</span>",
"target": [
"li:nth-child(1) > .t"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.93 (foreground color: #7d7666, background color: #f4efe3, font size: 7.9pt (10.5px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#cf3410",
"bgColor": "#f4efe3",
"contrastRatio": 4.4,
"fontSize": "7.9pt (10.5px)",
"fontWeight": "bold",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<body>",
"target": [
"body"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 4.4 (foreground color: #cf3410, background color: #f4efe3, font size: 7.9pt (10.5px), font weight: bold). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<b>06:41</b>",
"target": [
"li:nth-child(1) > .t > b"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 4.4 (foreground color: #cf3410, background color: #f4efe3, font size: 7.9pt (10.5px), font weight: bold). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#7d7666",
"bgColor": "#f4efe3",
"contrastRatio": 3.93,
"fontSize": "7.9pt (10.5px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<body>",
"target": [
"body"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 3.93 (foreground color: #7d7666, background color: #f4efe3, font size: 7.9pt (10.5px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span class=\"t\"><b>06:22</b> TRANSIT</span>",
"target": [
"li:nth-child(2) > .t"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.93 (foreground color: #7d7666, background color: #f4efe3, font size: 7.9pt (10.5px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#cf3410",
"bgColor": "#f4efe3",
"contrastRatio": 4.4,
"fontSize": "7.9pt (10.5px)",
"fontWeight": "bold",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<body>",
"target": [
"body"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 4.4 (foreground color: #cf3410, background color: #f4efe3, font size: 7.9pt (10.5px), font weight: bold). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<b>06:22</b>",
"target": [
"li:nth-child(2) > .t > b"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 4.4 (foreground color: #cf3410, background color: #f4efe3, font size: 7.9pt (10.5px), font weight: bold). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#7d7666",
"bgColor": "#f4efe3",
"contrastRatio": 3.93,
"fontSize": "7.9pt (10.5px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<body>",
"target": [
"body"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 3.93 (foreground color: #7d7666, background color: #f4efe3, font size: 7.9pt (10.5px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span class=\"t\"><b>05:58</b> MARKETS</span>",
"target": [
"li:nth-child(3) > .t"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.93 (foreground color: #7d7666, background color: #f4efe3, font size: 7.9pt (10.5px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#cf3410",
"bgColor": "#f4efe3",
"contrastRatio": 4.4,
"fontSize": "7.9pt (10.5px)",
"fontWeight": "bold",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<body>",
"target": [
"body"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 4.4 (foreground color: #cf3410, background color: #f4efe3, font size: 7.9pt (10.5px), font weight: bold). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<b>05:58</b>",
"target": [
"li:nth-child(3) > .t > b"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 4.4 (foreground color: #cf3410, background color: #f4efe3, font size: 7.9pt (10.5px), font weight: bold). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#7d7666",
"bgColor": "#f4efe3",
"contrastRatio": 3.93,
"fontSize": "7.9pt (10.5px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<body>",
"target": [
"body"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 3.93 (foreground color: #7d7666, background color: #f4efe3, font size: 7.9pt (10.5px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span class=\"t\"><b>05:40</b> WEATHER</span>",
"target": [
"li:nth-child(4) > .t"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.93 (foreground color: #7d7666, background color: #f4efe3, font size: 7.9pt (10.5px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#cf3410",
"bgColor": "#f4efe3",
"contrastRatio": 4.4,
"fontSize": "7.9pt (10.5px)",
"fontWeight": "bold",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<body>",
"target": [
"body"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 4.4 (foreground color: #cf3410, background color: #f4efe3, font size: 7.9pt (10.5px), font weight: bold). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<b>05:40</b>",
"target": [
"li:nth-child(4) > .t > b"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 4.4 (foreground color: #cf3410, background color: #f4efe3, font size: 7.9pt (10.5px), font weight: bold). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#7d7666",
"bgColor": "#f4efe3",
"contrastRatio": 3.93,
"fontSize": "7.9pt (10.5px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<body>",
"target": [
"body"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 3.93 (foreground color: #7d7666, background color: #f4efe3, font size: 7.9pt (10.5px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span class=\"t\"><b>05:12</b> SPORTS</span>",
"target": [
"li:nth-child(5) > .t"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.93 (foreground color: #7d7666, background color: #f4efe3, font size: 7.9pt (10.5px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#cf3410",
"bgColor": "#f4efe3",
"contrastRatio": 4.4,
"fontSize": "7.9pt (10.5px)",
"fontWeight": "bold",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<body>",
"target": [
"body"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 4.4 (foreground color: #cf3410, background color: #f4efe3, font size: 7.9pt (10.5px), font weight: bold). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<b>05:12</b>",
"target": [
"li:nth-child(5) > .t > b"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 4.4 (foreground color: #cf3410, background color: #f4efe3, font size: 7.9pt (10.5px), font weight: bold). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#7d7666",
"bgColor": "#f4efe3",
"contrastRatio": 3.93,
"fontSize": "7.9pt (10.5px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<body>",
"target": [
"body"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 3.93 (foreground color: #7d7666, background color: #f4efe3, font size: 7.9pt (10.5px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span class=\"t\"><b>04:55</b> CITY</span>",
"target": [
"li:nth-child(6) > .t"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.93 (foreground color: #7d7666, background color: #f4efe3, font size: 7.9pt (10.5px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#cf3410",
"bgColor": "#f4efe3",
"contrastRatio": 4.4,
"fontSize": "7.9pt (10.5px)",
"fontWeight": "bold",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<body>",
"target": [
"body"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 4.4 (foreground color: #cf3410, background color: #f4efe3, font size: 7.9pt (10.5px), font weight: bold). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<b>04:55</b>",
"target": [
"li:nth-child(6) > .t > b"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 4.4 (foreground color: #cf3410, background color: #f4efe3, font size: 7.9pt (10.5px), font weight: bold). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#7d7666",
"bgColor": "#ece4d0",
"contrastRatio": 3.56,
"fontSize": "7.9pt (10.5px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<div class=\"widget on\" data-rv=\"\" style=\"--d:.16s\">",
"target": [
".widget.on[data-rv=\"\"]:nth-child(3)"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 3.56 (foreground color: #7d7666, background color: #ece4d0, font size: 7.9pt (10.5px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<p>09:00 \u00b7 Pier 9 staging \u00b7 Isobar crew on site</p>",
"target": [
"li:nth-child(1) > div > p"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.56 (foreground color: #7d7666, background color: #ece4d0, font size: 7.9pt (10.5px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#7d7666",
"bgColor": "#ece4d0",
"contrastRatio": 3.56,
"fontSize": "7.9pt (10.5px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<div class=\"widget on\" data-rv=\"\" style=\"--d:.16s\">",
"target": [
".widget.on[data-rv=\"\"]:nth-child(3)"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 3.56 (foreground color: #7d7666, background color: #ece4d0, font size: 7.9pt (10.5px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<p>18:30 \u00b7 Streamed free for all readers</p>",
"target": [
"li:nth-child(2) > div > p"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.56 (foreground color: #7d7666, background color: #ece4d0, font size: 7.9pt (10.5px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#7d7666",
"bgColor": "#ece4d0",
"contrastRatio": 3.56,
"fontSize": "7.9pt (10.5px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<div class=\"widget on\" data-rv=\"\" style=\"--d:.16s\">",
"target": [
".widget.on[data-rv=\"\"]:nth-child(3)"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 3.56 (foreground color: #7d7666, background color: #ece4d0, font size: 7.9pt (10.5px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<p>12:00\u201320:00 \u00b7 Meridian Quay print room</p>",
"target": [
"li:nth-child(3) > div > p"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.56 (foreground color: #7d7666, background color: #ece4d0, font size: 7.9pt (10.5px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#f3ccc3",
"bgColor": "#cf3410",
"contrastRatio": 3.42,
"fontSize": "7.9pt (10.5px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<div class=\"stats\" aria-label=\"Newsroom by the numbers\">",
"target": [
".stats"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 3.42 (foreground color: #f3ccc3, background color: #cf3410, font size: 7.9pt (10.5px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span class=\"stat-l\">Daily readers</span>",
"target": [
".on[data-rv=\"\"]:nth-child(1) > .stat-l"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.42 (foreground color: #f3ccc3, background color: #cf3410, font size: 7.9pt (10.5px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#f3ccc3",
"bgColor": "#cf3410",
"contrastRatio": 3.42,
"fontSize": "7.9pt (10.5px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<div class=\"stats\" aria-label=\"Newsroom by the numbers\">",
"target": [
".stats"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 3.42 (foreground color: #f3ccc3, background color: #cf3410, font size: 7.9pt (10.5px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span class=\"stat-l\">Day-1 forecast accuracy</span>",
"target": [
".on[data-rv=\"\"]:nth-child(2) > .stat-l"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.42 (foreground color: #f3ccc3, background color: #cf3410, font size: 7.9pt (10.5px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#f3ccc3",
"bgColor": "#cf3410",
"contrastRatio": 3.42,
"fontSize": "7.9pt (10.5px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<div class=\"stats\" aria-label=\"Newsroom by the numbers\">",
"target": [
".stats"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 3.42 (foreground color: #f3ccc3, background color: #cf3410, font size: 7.9pt (10.5px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span class=\"stat-l\">Live sensor nodes</span>",
"target": [
".on[data-rv=\"\"]:nth-child(3) > .stat-l"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.42 (foreground color: #f3ccc3, background color: #cf3410, font size: 7.9pt (10.5px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#f3ccc3",
"bgColor": "#cf3410",
"contrastRatio": 3.42,
"fontSize": "7.9pt (10.5px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<div class=\"stats\" aria-label=\"Newsroom by the numbers\">",
"target": [
".stats"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 3.42 (foreground color: #f3ccc3, background color: #cf3410, font size: 7.9pt (10.5px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span class=\"stat-l\">Corrections issued YTD \u2014 quickly & visibly</span>",
"target": [
".on[data-rv=\"\"]:nth-child(4) > .stat-l"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.42 (foreground color: #f3ccc3, background color: #cf3410, font size: 7.9pt (10.5px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#7d7666",
"bgColor": "#ece4d0",
"contrastRatio": 3.56,
"fontSize": "7.5pt (10px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<blockquote class=\"quote on\" data-rv=\"\">",
"target": [
"blockquote:nth-child(1)"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 3.56 (foreground color: #7d7666, background color: #ece4d0, font size: 7.5pt (10px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span>Harbor Pilot, Local 12</span>",
"target": [
"blockquote:nth-child(1) > .who > div > span"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.56 (foreground color: #7d7666, background color: #ece4d0, font size: 7.5pt (10px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#7d7666",
"bgColor": "#ece4d0",
"contrastRatio": 3.56,
"fontSize": "7.5pt (10px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<blockquote class=\"quote on\" data-rv=\"\" style=\"--d:.08s\">",
"target": [
"blockquote:nth-child(2)"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 3.56 (foreground color: #7d7666, background color: #ece4d0, font size: 7.5pt (10px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span>Civics Teacher, Harbor City High</span>",
"target": [
"blockquote:nth-child(2) > .who > div > span"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.56 (foreground color: #7d7666, background color: #ece4d0, font size: 7.5pt (10px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#7d7666",
"bgColor": "#ece4d0",
"contrastRatio": 3.56,
"fontSize": "7.5pt (10px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<blockquote class=\"quote on\" data-rv=\"\" style=\"--d:.16s\">",
"target": [
"blockquote:nth-child(3)"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 3.56 (foreground color: #7d7666, background color: #ece4d0, font size: 7.5pt (10px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span>Urban Planner, Harbor City University</span>",
"target": [
"blockquote:nth-child(3) > .who > div > span"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.56 (foreground color: #7d7666, background color: #ece4d0, font size: 7.5pt (10px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#7d7666",
"bgColor": "#ece4d0",
"contrastRatio": 3.56,
"fontSize": "7.5pt (10px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<blockquote class=\"quote on\" data-rv=\"\" style=\"--d:.24s\">",
"target": [
"blockquote:nth-child(4)"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 3.56 (foreground color: #7d7666, background color: #ece4d0, font size: 7.5pt (10px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span>Reader since 2023</span>",
"target": [
"blockquote:nth-child(4) > .who > div > span"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.56 (foreground color: #7d7666, background color: #ece4d0, font size: 7.5pt (10px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#7d7666",
"bgColor": "#f4efe3",
"contrastRatio": 3.93,
"fontSize": "8.3pt (11px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<div class=\"tier on\" data-rv=\"\" style=\"--d:.16s\">",
"target": [
".tier.on[data-rv=\"\"]:nth-child(3)"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 3.93 (foreground color: #7d7666, background color: #f4efe3, font size: 8.3pt (11px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span>/MONTH</span>",
"target": [
".tier.on[data-rv=\"\"]:nth-child(3) > .price > span"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.93 (foreground color: #7d7666, background color: #f4efe3, font size: 8.3pt (11px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#cf3410",
"bgColor": "#f4efe3",
"contrastRatio": 4.4,
"fontSize": "8.3pt (11px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<body>",
"target": [
"body"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 4.4 (foreground color: #cf3410, background color: #f4efe3, font size: 8.3pt (11px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<p class=\"kick on\" data-rv=\"\">The Lead \u00b7 Infrastructure & Climate</p>",
"target": [
".lead > .kick[data-rv=\"\"]"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 4.4 (foreground color: #cf3410, background color: #f4efe3, font size: 8.3pt (11px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#cf3410",
"bgColor": "#ece4d0",
"contrastRatio": 3.99,
"fontSize": "8.6pt (11.5px)",
"fontWeight": "bold",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<div class=\"correction on\" data-rv=\"\" style=\"--d:.15s\">",
"target": [
".correction"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 3.99 (foreground color: #cf3410, background color: #ece4d0, font size: 8.6pt (11.5px), font weight: bold). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<b>CORRECTION \u2014 JUNE 9, 2025:</b>",
"target": [
".correction > b"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.99 (foreground color: #cf3410, background color: #ece4d0, font size: 8.6pt (11.5px), font weight: bold). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#cf3410",
"bgColor": "#ece4d0",
"contrastRatio": 3.99,
"fontSize": "8.6pt (11.5px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<div class=\"correction on\" data-rv=\"\" style=\"--d:.15s\">",
"target": [
".correction"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 3.99 (foreground color: #cf3410, background color: #ece4d0, font size: 8.6pt (11.5px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<a href=\"#faq\" style=\"color:var(--red)\">View the corrections log \u2192</a>",
"target": [
".correction > a[href$=\"#faq\"]"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.99 (foreground color: #cf3410, background color: #ece4d0, font size: 8.6pt (11.5px), font weight: normal). Expected contrast ratio of 4.5:1"
}
]
},
{
"id": "target-size",
"impact": "serious",
"tags": [
"cat.sensory-and-visual-cues",
"wcag22aa",
"wcag258"
],
"description": "Ensure touch targets have sufficient size and space",
"help": "All touch targets must be 24px large, or leave sufficient space",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/target-size?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "target-size",
"data": {
"minSize": 24,
"width": 278.7,
"height": 20
},
"relatedNodes": [],
"impact": "serious",
"message": "Target has insufficient size (278.7px by 20px, should be at least 24px by 24px)"
},
{
"id": "target-offset",
"data": {
"closestOffset": 19.6,
"minOffset": 24
},
"relatedNodes": [
{
"html": "<a class=\"btn solid sm sub\" href=\"#subscribe\">Subscribe</a>",
"target": [
".sm"
]
}
],
"impact": "serious",
"message": "Target has insufficient space to its closest neighbors. Safe clickable space has a diameter of 19.6px instead of at least 24px."
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<a href=\"#sports\">Harborhawks punch October ticket</a>",
"target": [
".on:nth-child(5) > .hl > a[href$=\"#sports\"]"
],
"failureSummary": "Fix any of the following:\n Target has insufficient size (278.7px by 20px, should be at least 24px by 24px)\n Target has insufficient space to its closest neighbors. Safe clickable space has a diameter of 19.6px instead of at least 24px."
},
{
"any": [
{
"id": "target-size",
"data": {
"messageKey": "partiallyObscured",
"minSize": 24,
"width": 531.7,
"height": 18.2
},
"relatedNodes": [
{
"html": "<a class=\"nl\" href=\"#world\">World</a>",
"target": [
".nl[href$=\"#world\"]"
]
},
{
"html": "<a class=\"nl\" href=\"#weather\">Weather Desk</a>",
"target": [
".nl[href$=\"#weather\"]"
]
},
{
"html": "<a class=\"nl\" href=\"#data\">Data Desk</a>",
"target": [
".nl[href$=\"#data\"]"
]
},
{
"html": "<a class=\"nl\" href=\"#city\">Business</a>",
"target": [
".nl[href$=\"#city\"]"
]
},
{
"html": "<a class=\"nl\" href=\"#sports\">Sports</a>",
"target": [
".nl[href$=\"#sports\"]"
]
},
{
"html": "<a class=\"nl\" href=\"#culture\">Culture</a>",
"target": [
".nl[href$=\"#culture\"]"
]
}
],
"impact": "serious",
"message": "Target has insufficient size because it is partially obscured (smallest space is 531.7px by 18.2px, should be at least 24px by 24px)"
},
{
"id": "target-offset",
"data": {
"closestOffset": 19.2,
"minOffset": 24
},
"relatedNodes": [
{
"html": "<a class=\"nl\" href=\"#data\">Data Desk</a>",
"target": [
".nl[href$=\"#data\"]"
]
}
],
"impact": "serious",
"message": "Target has insufficient space to its closest neighbors. Safe clickable space has a diameter of 19.2px instead of at least 24px."
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<a href=\"#city\">Fare-free weekends on Line 3 begin Saturday \u2014 here's what we'll be measuring</a>",
"target": [
".bull-item:nth-child(3) > div > .hl > a[href$=\"#city\"]"
],
"failureSummary": "Fix any of the following:\n Target has insufficient size because it is partially obscured (smallest space is 531.7px by 18.2px, should be at least 24px by 24px)\n Target has insufficient space to its closest neighbors. Safe clickable space has a diameter of 19.2px instead of at least 24px."
}
]
},
{
"id": "link-in-text-block",
"impact": "serious",
"tags": [
"cat.color",
"wcag2a",
"wcag141",
"TTv5",
"TT13.a",
"EN-301-549",
"EN-9.1.4.1"
],
"description": "Ensure links are distinguished from surrounding text in a way that does not rely on color",
"help": "Links must be distinguishable without relying on color",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/link-in-text-block?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "link-in-text-block",
"data": {
"messageKey": "fgContrast",
"contrastRatio": 2.04,
"requiredContrastRatio": 3,
"nodeColor": "#cf3410",
"parentColor": "#434036"
},
"relatedNodes": [
{
"html": "<div class=\"correction on\" data-rv=\"\" style=\"--d:.15s\">",
"target": [
".correction"
]
}
],
"impact": "serious",
"message": "The link has insufficient color contrast of 2.04:1 with the surrounding text. (Minimum contrast is 3:1, link text: #cf3410, surrounding text: #434036)"
},
{
"id": "link-in-text-block-style",
"data": null,
"relatedNodes": [
{
"html": "<div class=\"correction on\" data-rv=\"\" style=\"--d:.15s\">",
"target": [
".correction"
]
}
],
"impact": "serious",
"message": "The link has no styling (such as underline) to distinguish it from the surrounding text"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<a href=\"#faq\" style=\"color:var(--red)\">View the corrections log \u2192</a>",
"target": [
".correction > a[href$=\"#faq\"]"
],
"failureSummary": "Fix any of the following:\n The link has insufficient color contrast of 2.04:1 with the surrounding text. (Minimum contrast is 3:1, link text: #cf3410, surrounding text: #434036)\n The link has no styling (such as underline) to distinguish it from the surrounding text"
}
]
}
],
"coverage": {
"contract": "main-document-vertical-scroll",
"complete": true,
"positions": [
{
"y": 0,
"height": 11146
},
{
"y": 576,
"height": 11146
},
{
"y": 1152,
"height": 11146
},
{
"y": 1728,
"height": 11146
},
{
"y": 2304,
"height": 11146
},
{
"y": 2880,
"height": 11146
},
{
"y": 3456,
"height": 11146
},
{
"y": 4032,
"height": 11146
},
{
"y": 4608,
"height": 11146
},
{
"y": 5184,
"height": 11146
},
{
"y": 5760,
"height": 11146
},
{
"y": 6336,
"height": 11146
},
{
"y": 6912,
"height": 11146
},
{
"y": 7488,
"height": 11146
},
{
"y": 8064,
"height": 11146
},
{
"y": 8640,
"height": 11146
},
{
"y": 9216,
"height": 11146
},
{
"y": 9792,
"height": 11146
},
{
"y": 10368,
"height": 11146
},
{
"y": 10426,
"height": 11146
}
],
"scans": 21,
"max_states": 512,
"settle_ms": 5000,
"page_timeout_seconds": 150,
"layout_stability": "consecutive 100ms size samples within one CSS pixel",
"animation_settling": "finite animations present when scroll resources are ready finish or are cancelled",
"interactive_states": "not exercised",
"horizontal_scroll": "not exercised"
}
}
System Prompt
You are a lead web developer at a top digital agency, tasked with creating a one-page website for a new client based on the given specifications, delivered as an HTML file. First non-whitespace char '<', last non-whitespace char '>'. Use the following services to generate placeholder images where needed:
- placehold.co (text): https://placehold.co/[{w}x{h}|{size}][/{bg-color}/{text-color}]?text={text}&font=[lato|lora|montserrat|noto sans|open sans|oswald|playfair display|poppins|pt sans|raleway|roboto|source sans|source sans pro]
- picsum.photos (photos): https://picsum.photos/[{w}/{h}|{size}]?[grayscale][&blur={1-10}]
- pravatar.cc (avatars): https://i.pravatar.cc/{size}?u={identifier}
Choose sizes appropriate to layout.
User Prompt
Create a **complete, polished, production-quality** primary web page for a new client in the "News/Weather/Information" sector.
Your goal is to generate the full HTML code for a page that is not just functional but also visually compelling, content-rich, and feels like a finished product ready for launch.
**Client & Category:**
- Industry: "News/Weather/Information"
- Description: News outlets, weather forecasts, breaking news, and general information resources.
**Your Creative Task:**
1. **Invent:** Create a unique, professional-sounding site name and a strong tagline fitting the "News/Weather/Information" category.
2. **Define Page:** Determine the most effective primary page type (e.g., homepage, service landing page, category portal) to showcase this fictional entity.
3. **Design:** Develop an opinionated, modern, and professional layout. Make distinct choices about structure and flow.
**Content & Structure Requirements (Deliver a COMPLETE page):**
- **Overall:** The final page must feel substantial and complete, with realistic amounts of text (multiple paragraphs per section where appropriate, avoid single sentences), well-integrated placeholder images, and logical flow. It should look like a real website a business would proudly use.
- **HEADER:** Include the invented site name, tagline, a logo placeholder image, and a primary navigation bar. Ensure the navigation has **at least 5-7 clearly defined, relevant links** including: "Sports", "Archive", "Business".
- **MAIN CONTENT:** Structure this area with **at least 3-4 distinct, well-developed sections**.
- Address key topics relevant to the "News/Weather/Information" category. Consider themes similar to: "World Affairs", "Data Journalism", "Weather Forecasts".
- **Content Depth:** Populate each section with **substantial, realistic text** (multiple sentences/paragraphs). Use authentic industry language and terminology like: "byline", "headline", "fact-checking".
- **Visuals:** Integrate relevant placeholder images logically within the content sections.
- **Calls to Action:** Include clear and contextually relevant CTAs. Use strong verbs similar to: "Subscribe", "Read More", "Follow Topic".
- **ENGAGEMENT (Recommended):** Strongly consider incorporating **one meaningful interactive element** that would genuinely benefit a user in the "News/Weather/Information" sector. Ideas similar but not limited to: "weather radar".
- **SIDEBAR (Optional):** If your design includes a sidebar, populate it with **useful, relevant content**. Ideas: "community news", "video highlights", "upcoming events".
- **FOOTER:** Include a professional footer with invented contact details, copyright (current year), social media links, and standard links (Privacy, Terms).
- **MODERN WEB PATTERNS:** Include modern web patterns like testimonial cards, feature grids, or FAQ accordions where appropriate.