What makes the Kindle Paperwhite to show text from a EPUB file in light-gray font?

Question

I've converted a DOCX file to the EPUB format using some online converter. It looks like the conversion was performed using the Calible behind the scenes. However this EPUB file is barely visible on my Kindle Paperwhite - the font color is light-gray. I've opened the stylesheet.css file (see below) and didn't find any color attributes besides the black color.

.block_ {
    display: block;
    font-size: 1.33333em;
    text-align: justify;
    margin: 0 0 0 35.5pt;
    padding: 0
    }
.block_1 {
    color: black;
    display: block;
    text-align: justify;
    text-indent: 0;
    margin: 0;
    padding: 0
    }
.block_2 {
    display: block;
    font-size: 2.44444em;
    font-weight: normal;
    line-height: 1.2;
    text-align: justify;
    text-indent: 0;
    margin: 0 0 0 35.5pt;
    padding: 0
    }
.block_3 {
    color: black;
    display: block;
    font-family: serif;
    font-size: 1.33333em;
    text-align: justify;
    text-indent: 35.5pt;
    margin: 0;
    padding: 0
    }
.block_4 {
    color: black;
    display: block;
    font-size: 1.33333em;
    text-align: justify;
    text-indent: 35.5pt;
    margin: 0;
    padding: 0
    }
.block_5 {
    display: block;
    font-size: 1.33333em;
    letter-spacing: 2pt;
    margin: 0 0 0 35.5pt;
    padding: 0
    }
.block_6 {
    display: list-item;
    font-size: 1.33333em;
    margin-left: 56.7pt;
    padding-bottom: 0;
    padding-top: 0;
    text-align: justify
    }
.block_7 {
    display: block;
    font-size: 1.5em;
    font-weight: bold;
    line-height: 1.2;
    text-align: justify;
    text-indent: 0;
    margin: 0 0 0 35.5pt;
    padding: 0
    }
.block_8 {
    color: black;
    display: block;
    font-size: 1.33333em;
    text-align: justify;
    text-indent: 35.5pt;
    margin: 0 0 0 70.9pt;
    padding: 0
    }
.block_9 {
    color: black;
    display: block;
    font-family: serif;
    font-size: 1.33333em;
    text-align: justify;
    text-indent: 35.5pt;
    margin: 0 0 0 70.9pt;
    padding: 0
    }
.block_10 {
    color: black;
    display: block;
    font-size: 1.33333em;
    font-style: italic;
    text-align: justify;
    text-indent: 35.5pt;
    margin: 0;
    padding: 0
    }
.block_11 {
    color: black;
    display: block;
    font-size: 1.33333em;
    font-weight: bold;
    text-align: justify;
    text-indent: 35.5pt;
    margin: 0;
    padding: 0
    }
.block_12 {
    color: black;
    display: block;
    font-size: 1.33333em;
    font-style: italic;
    text-align: justify;
    margin: 0 0 0 142pt;
    padding: 0
    }
.block_13 {
    color: black;
    display: block;
    font-family: serif;
    font-size: 1.33333em;
    text-align: justify;
    margin: 0 0 0 142pt;
    padding: 0
    }
.block_14 {
    display: block;
    font-size: 2.44444em;
    font-weight: normal;
    line-height: 1.2;
    text-align: justify;
    text-indent: 0;
    margin: 0 0 0 35.5pt;
    padding: 0
    }
.block_15 {
    display: block;
    text-align: justify;
    text-indent: -17.6pt;
    margin: 0 0 0 35.5pt;
    padding: 0
    }
.calibre {
    color: #808080;
    display: block;
    font-family: "Verdana", sans-serif;
    font-size: 0.75em;
    padding-left: 0;
    padding-right: 0;
    margin: 0 5pt
    }
.calibre1 {
    color: gray;
    display: block;
    height: 2px;
    margin: 0.5em auto;
    border: currentColor inset 1px
    }
.calibre2 {
    display: block;
    height: auto;
    width: auto
    }
.calibre3 {
    font-weight: bold
    }
.calibre4 {
    font-size: 0.75em;
    line-height: normal;
    vertical-align: super
    }
.calibre5 {
    display: block;
    font-size: 1.88889em;
    line-height: 1.2
    }
.calibre6 {
    line-height: 1.2;
    text-decoration: none
    }
.calibre7 {
    display: block;
    margin-left: 40px
    }
.footnote {
    display: block;
    margin: 1em 0
    }
.footnote1 {
    display: block;
    page-break-after: avoid;
    margin: 1em 0
    }
.list_ {
    display: block;
    list-style-type: square;
    margin-bottom: 0;
    margin-right: 0;
    margin-top: 0;
    padding-bottom: 0;
    padding-right: 0;
    padding-top: 0
    }
.noteref {
    text-decoration: none
    }
.tab {
    white-space: pre-wrap
    }
.text_ {
    font-size: 1em;
    letter-spacing: 0;
    vertical-align: 0
    }
.text_1 {
    font-size: 1em;
    font-style: italic
    }
.text_2 {
    font-size: 1em;
    font-weight: bold;
    letter-spacing: 0;
    vertical-align: 0
    }
.text_3 {
    letter-spacing: 0;
    vertical-align: 0
    }

There are other files on my Kindle, which are rendered normally. What should I do with this EPUB file to get rid of this light-gray color?

Answer 1

Welcome. The following two class codes in your list are gray on both:

.calibre {
  color: #808080;

.calibre1 {
  color: gray;

Change the above classes font color to either of the below (provided it don't impact some of your other CSS page styling intentions such as background):

color: #000;

Or...

 color: black;

Addition note:

Ebook readers (the end user) may use 'night mode' on their device, and if you use #000 black color for font it may imped their ability to read it. It is suggested to not even have a font color designated in the epub at certain sections of the CSS (though CSS styling exceptions will exist).

Read extra pointers here: Ebook SE