Don’t use transparency (a.k.a. “alpha blending”: either the CSS opacity property, or the alpha value of rgba() or hsla() color values) to make your text grey; instead, simply specify a grey color value. Why? Because semi-transparent text (i.e., text with an alpha value of less than 1.0) doesn’t render as crisply as fully-opaque text.
Look at the two text samples below. On the left is text with a grey color value; on the right, text made to look grey by setting an alpha value below 1.0.
When rendered as a simple color field (the grey boxes), the color values below (on a white background) are rendered identically. But when set as the color of text, the rendering is different:
Color
color: hsla(0, 0%, 40%, 1.0)
Numquam laborum at commodi eius. Eum rerum perferendis ab neque. Molestias eius quasi id ipsum. Sint voluptatem sequi ex corrupti enim eum. Voluptates et repudiandae nihil autem et odio a similique.
Eligendi quae deserunt vero. Nihil incidunt autem exercitationem et totam impedit. Et totam porro nemo consequatur molestiae aliquid facere. Similique adipisci facere quia pariatur doloribus quo.
Culpa voluptatem blanditiis et unde. Est porro quam atque non qui eos. Iure autem cupiditate delectus dignissimos nihil debitis iure. Quia tenetur quibusdam in laborum perferendis nihil quas.
Fugiat rerum et repellendus. Illo et odit eos architecto eos. Totam debitis tempore dolorem et. Ducimus et magni et et vero rerum.
Non laborum distinctio amet. Nobis qui quia ad repudiandae. Aliquam consectetur eveniet amet quia. Nihil quasi molestias repudiandae ea sed.
Opacity
color: hsla(0, 0%, 0%, 0.60)
Numquam laborum at commodi eius. Eum rerum perferendis ab neque. Molestias eius quasi id ipsum. Sint voluptatem sequi ex corrupti enim eum. Voluptates et repudiandae nihil autem et odio a similique.
Eligendi quae deserunt vero. Nihil incidunt autem exercitationem et totam impedit. Et totam porro nemo consequatur molestiae aliquid facere. Similique adipisci facere quia pariatur doloribus quo.
Culpa voluptatem blanditiis et unde. Est porro quam atque non qui eos. Iure autem cupiditate delectus dignissimos nihil debitis iure. Quia tenetur quibusdam in laborum perferendis nihil quas.
Fugiat rerum et repellendus. Illo et odit eos architecto eos. Totam debitis tempore dolorem et. Ducimus et magni et et vero rerum.
Non laborum distinctio amet. Nobis qui quia ad repudiandae. Aliquam consectetur eveniet amet quia. Nihil quasi molestias repudiandae ea sed.