css contrast color error, i don't know why

this is my code
i decided background-color: #f1f5ff
and color(font-color): #181818;

i think it contrast is good but still occured error

i can't see text..

what is problem .. T.T

and also i tried color -> font-color

but result is same error

i see this error few days ago, but i can't solve until now..

please help me T.T

import React from 'react';
import styled, { keyframes } from 'styled-components';
//import CompanyAdvantages from '../Sample/CompanyAdvantages';

export default function SecondArea() {
  return (
    <Container>
      <Row1>
        <TextContainer>
          <Text1>안전하고 간편한 나의 구매 중개사</Text1>
          <Text2>
            유통 마진 거품을 줄여 구매자와 판매자를 잇는 C2Mt서비스 비즈큐레이터
          </Text2>
        </TextContainer>
      </Row1>
    </Container>
  );
}

const Container = styled.section`
  width: 100vw;
  height: 560px;
  position: relative;
  background-color: #f1f5ff;
  color: #181818;
  font-size: 12px;
  line-height: 20px;
  font-family: GmarketSansTTFMedium;
`;

const Row1 = styled.div`
  display: flex;
  flex-grow: 1;
  position: absolute;
  top: 35%;
  flex-direction: column;
`;  

const TextContainer = styled.div`
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  width: fit-content;
  height: fit-content;
  line-height: 52px;
  font-size: 48px;
  opacity: 0;
`;

const Text1 = styled.div`
  font-weight: 300;
  text-align: left;
`;
const Text2 = styled.div`
  font-weight: bold;
  text-align: left;
`;

In your TextContainer styled component, you have set opacity: 0. Setting an opacity on a parent component will affect its child components too. Remove it and you will be able to see the text.