css - 高对比度的可访问 d3 文本

Question

我有一个使用 d3 创建的简单圆环图。我的代码非常简单，我在圆环图中使用<text>element 添加了一个文本。与此处的示例类似，但要简单得多。

         var style = {
                'font-size': fontSize,
                'text-anchor': 'middle'
            };

            svg.append("text")
                .attr("dy", dy)
                .style(style)
                .attr("class", "dataText")
                .text("100%");
        }

一切正常，但是当我在 Windows 高对比度模式（alt + 左移 + 打印屏幕）下测试时，这个文本没有出现。如果我将文本更改为黄色，则会以高对比度显示。但是，对于普通用户，我需要它是黑色的。

到目前为止我尝试了什么：1）我尝试使用此处建议的@media 查询检测高对比度模式，并仅在高对比度模式下将填充颜色更改为黄色，但似乎 FF 对此有一个错误。2）从这个链接，他们建议将颜色/边框设置为透明。还是没有运气。

以前有人遇到过这个问题吗？你做了什么让这个可以访问？我试图以高对比度打开 NVD3（使用 D3）示例页面，看起来他们的文本元素也有问题。

普通模式下的饼图：

高对比度模式下的饼图（文字不显示）：