Open Bug 1778865 Opened 2 years ago Updated 2 years ago

Accessibility devtools report incorrect contrast ratio for SVG text

Categories

(DevTools :: Accessibility Tools, defect)

Firefox 103
defect

Tracking

(Not tracked)

UNCONFIRMED

People

(Reporter: rchristian, Unassigned)

Details

Attachments

(1 file)

User Agent: Mozilla/5.0 (X11; Linux x86_64; rv:103.0) Gecko/20100101 Firefox/103.0

Steps to reproduce:

I'm using the following SVG:

<svg viewBox="0 0 78 20">
    <g text-anchor="middle" text-rendering="geometricPrecision" font-size="110">
        <rect width="47" height="20" fill="#555" />            
        <text x="245" y="140" transform="scale(.1)" fill="#fff">license</text>
        <rect width="31" height="20" fill="#df6060" x="47" />
        <text x="615" y="140" transform="scale(.1)" fill="#fff">MIT</text>
    </g>
</svg>

Add this to an HTML doc, open Firefox's devtools, and notice the incorrect color contrast reported from the accessibility tool.

Actual results:

Firefox reports a consistent contrast ratio of 1.36 for both portions of the SVG, which is very much incorrect.

Furthermore, I'm not sure where Firefox is pulling this supposed background color from. By trial and error with a contrast ratio tool, I've found that Firefox seemingly thinks the background is #ddd, or close to that. The closest color value to that on the page is #ccc, which I use for text, but that would result in a contrast ratio of 1.6, well off the reported 1.36.

So I'm not sure where that's coming from.

Expected results:

The left half should have a contrast ratio 7.45 and the right should be 3.51.

The Bugbug bot thinks this bug should belong to the 'DevTools::Accessibility Tools' component, and is moving the bug to that component. Please correct in case you think the bot is wrong.

Component: Untriaged → Accessibility Tools
Product: Firefox → DevTools
Severity: -- → S3
You need to log in before you can comment on or make changes to this bug.